中心の DIV_javascript スキルの JS ポップアップ コード

まず、JS におけるウィンドウや Web ページのいくつかのサイズ属性の意味を詳しく説明します。
document.body.clientWidth (Web ページの表示領域の幅): が表示される領域の幅を指します。ブラウザは、ブラウザの境界線の幅と垂直スクロール バーの幅を除いて、Web ページを表示します。サイズはブラウザのウィンドウサイズに応じて変わります。
document.body.clientHeight (Web ページの表示領域の高さ): ブラウザの境界線の幅と水平スクロール バーの高さを除いた、ブラウザが Web ページを表示する領域に表示される高さを指します。サイズはブラウザのウィンドウサイズに応じて変わります。
document.body.scrollTop (スクロールされる Web ページの高さ): 垂直スクロール バーを引いたときに、アドレス バーとメニュー バーによってカバーされる Web ページの部分の高さを指します。
document.body.scrollLeft (スクロールされる Web ページの左側): 水平スクロール バーが引かれたときに左側の線によってカバーされる Web ページの左側の幅を指します。
次に、プログラムの実装方法を分析してみましょう:

達成したい最初のステップは、スクロール バーの有無に関係なく、レイヤーがポップアップしたときにレイヤーを完全に中央に配置することです。
1. 表示領域の左および上からのレイヤーの位置を計算します。
注: divId は中央に配置されるレイヤーを指し、divId.clientWidth はその幅です。 ＠
var divId = document.getElementById("xxx");
var v_left=(document.body.clientWidth-divId.clientWidth)/2;
var v_top=(document.body.clientHeight-divId) .clientHeight)/2;
2. 取得した値を DIV の left 属性と top 属性に再割り当てします。
divId.style.top=v_top; >解説：divIdはDIVタグのid値です
このようにすると、このレイヤーが中央に表示されます。
達成したい 2 番目のステップは、スクロール バーをドラッグしたときにポップアップするレイヤーを中央に配置することです。
実際には、ドラッグした幅と高さを、前に計算した左マージンと上マージンに加算するだけで済みます。
v_left =document.body.scrollLeft;
v_top =document.body.scrollTop;
2. 取得した値を DIV
divId.style.left の left 属性と top 属性に再割り当てします。 =v_left ;
divId.style.top=v_top;
中央に表示されます。
完全なコードは次のとおりです:

<title>ポップアップレイヤーが中央に表示されます</title> <meta name="generator" content="editplus"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content=""> <table width="100%"> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> </table> <div id="mxh" style="position:absolute;left:200px;top:30px;width:200px;height:200px;background -color:navy;border:2px"> </div>中央に表示させて頂いております。
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]


必要に応じて、スクロールバーをドラッグしたりウィンドウのサイズを変更したりするときにレイヤーを中央に表示できるようにするには、onresize="divcenter();" と onscroll="divcenter();" を body プロパティに追加します。これは問題ありませんが、表示効果があまり良くない可能性があります。特にスクロール バーをドラッグすると、効果が 1 つ良い場合と 1 つ良い場合があり、非常に不快です。