ポップアップ レイヤーは常にフロントエンドで処理する必要があります。通常、ポップアップ レイヤーの高さと幅が固定されている場合は、スタイルを使用して処理できます。固定幅または固定高さと幅の場合は、JS を使用して処理して、現在のウィンドウの高さまたは幅を動的に取得する必要があります。今日は 2 つの状況を実行しました。1 つは画面フォームに対して相対的なもので、もう 1 つは相対的なものです。コードを見てください。役に立つかもしれません: コードをコピー コードは次のとおりです: <br>body{margin:0px;padding:0px} <br>#div1{背景:#F00;色: #FFF; 表示:なし;位置:絶対;} <br>#div2{背景:#333333;色: #FFF;幅:400px;表示:なし; :absolute;} <br> </script> ; <BR>//ブラウザウィンドウを垂直方向に中央揃えします<BR><!-- <BR><Script type="text/javascript"> <br>function Popup(popupName){ <br>var _scrollHeight = $ (document).scrollTop(),//ページの上部から現在のウィンドウの高さを取得します<br>_windowHeight = $(window).height(),//現在のウィンドウの高さを取得します<br>_windowWidth = $ (window).width(),//現在のウィンドウの幅を取得します<br>_popupHeight = PopupName.height(),//ポップアップレイヤーの高さを取得します<br>_popupWeight = PopupName.width();//ポップアップレイヤーの幅を取得します<br>_posiTop = (_windowHeight - _popupHeight)/2 _scrollHeight; <br>_posiLeft = (_windowWidth - _popupWeight)/2 <br> PopupName.css({"left": _posiLeft "px","top":_posiTop "px ","display":"block"});//位置を設定 <br>} <br>$(function(){ <br>$(".btn1").click(function(){ <br>popup ($("#div1")); <br>$(".btn2").click(function(){ <br>popup($("#div2")); <br> }); <br>}); <br></script> <br>--> <br><Script type="text/javascript"> <br>function Popup(popupName){ <br>_windowHeight = $(".wrap").height(),//現在のウィンドウの高さを取得します<br>_windowWidth = $(".wrap").width(), //現在のウィンドウの幅を取得します<br>_popupHeight = PopupName.height(),//ポップアップレイヤーの高さを取得します<br>_popupWeight = PopupName.width( );//ポップアップレイヤーの幅を取得します<br>_posiTop = (_windowHeight - _popupHeight)/2; <br>_posiLeft = (_windowWidth - _popupWeight)/2; <br>popupName.css({"left": _posiLeft "px" ,"top":_posiTop "px","display":" block"});//位置を設定 <br>} <br>$(function(){ <br>$(".btn1").click( function(){ <br>popup($("#div1" )); <br>}); <br>$(".btn2").click(function(){ <br>popup($("# div2")); <br>} ); <br></head> <br><div> <br><input class="btn1" value="1"/></div> <br><input class="btn2" type="button" value="2"/ ></div> <br><div style= "width:500px;background:#ccc;position:relative;top:100px;left:200px;" class="wrap"> 私は現在のウィンドウです、私は現在のウィンドウです、私は現在のウィンドウです、私は現在のウィンドウです、私は現在のウィンドウです、私は現在のウィンドウです<br>私は現在のウィンドウです、私は現在のウィンドウです、私は現在のウィンドウです<br> ;私は現在のウィンドウです、私は現在のウィンドウ、私は現在のウィンドウです<br>私は現在のウィンドウです、私は現在のウィンドウです、私は現在のウィンドウです<br>私は現在のウィンドウです、私は現在のウィンドウです、私は現在のウィンドウです<br><br>私は現在のウィンドウです、私は現在のウィンドウです、私は現在のウィンドウです、私は現在のウィンドウです<br><div id="div1">私はポップアップ ウィンドウ 1111 < ;br>私はポップアップ ウィンドウ 1111 です<br>私はポップアップ ウィンドウ 1111 です<br>私はポップアップ ウィンドウ 1111 です<br>私はポップアップ ウィンドウ 1111 です<br>私はポップアップ ウィンドウ 1111 です<br>私はポップアップ ウィンドウ 1111</div><br><div id="div2">私はポップアップ ウィンドウ 2222<br>私はポップアップ ウィンドウ 2222<br>ポップアップ ウィンドウ 2222<br>私はポップアップ ウィンドウ 2222</div> <br></body> /html><br><br> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
