팝업 레이어는 항상 프런트 엔드에서 처리해야 하는 항목입니다. 일반적인 상황에서 팝업 레이어의 높이와 너비가 고정되어 있으면 스타일을 사용하여 수행할 수 있습니다. 또는 고정 너비 또는 고정 높이 및 너비, 현재 창의 높이 또는 너비를 동적으로 얻으려면 JS를 사용하여 처리해야 합니다. 오늘 우리는 두 가지 상황을 수행했습니다. 하나는 화면 형식에 상대적이고 다른 하나는 상대적입니다. 현재 창으로 이동하면 도움이 될 수 있습니다. 코드 복사 코드는 다음과 같습니다. <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>팝업 ($("#div1")); <br>}) <br>$(".btn2").click( function(){ <br>popup($("#div2")); <br> }); <br>}); <br></script> <br>--> <br>// 현재 창은 수직 중앙에 있습니다 <br><Script type="text/javascript"> <br>함수 팝업(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><br>나는 현재 창입니다, 나는 현재 창입니다, 나는 현재 창입니다, 나는 현재 창입니다<br><div id="div1">나는 팝업 창 1111 < ;br>나는 팝업창 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></div> <br></body> /html> <br><br> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
