jQuery 팝업 레이어는 항상 화면 또는 현재 window_jquery를 기준으로 수직 중앙에 위치합니다.

팝업 레이어는 항상 프런트 엔드에서 처리해야 하는 항목입니다. 일반적인 상황에서 팝업 레이어의 높이와 너비가 고정되어 있으면 스타일을 사용하여 수행할 수 있습니다. 또는 고정 너비 또는 고정 높이 및 너비, 현재 창의 높이 또는 너비를 동적으로 얻으려면 JS를 사용하여 처리해야 합니다. 오늘 우리는 두 가지 상황을 수행했습니다. 하나는 화면 형식에 상대적이고 다른 하나는 상대적입니다. 현재 창으로 이동하면 도움이 될 수 있습니다.

코드 복사 코드는 다음과 같습니다. body{margin:0px;padding:0px} #div1{배경:#F00;색상: #FFF; 디스플레이:없음;위치:절대;} #div2{배경:#333333;색상: #FFF;너비:400px;디스플레이:없음; :absolute;} //브라우저 창을 수직으로 중앙에 배치 function popup(popupName){ var _scrollHeight = $ (document).scrollTop(),//페이지 상단에서 현재 창의 높이를 가져옵니다 _windowHeight = $(window).height(),//현재 창 높이를 가져옵니다 _windowWidth = $ (window).width(),//현재 창 너비 가져오기 _popupHeight = popupName.height(),//팝업 레이어 높이 가져오기 _popupWeight = popupName.width();//팝업 레이어 너비 가져오기 _posiTop = (_windowHeight - _popupHeight)/2 _scrollHeight; _posiLeft = (_windowWidth - _popupWeight)/2 popupName.css({"left": _posiLeft "px","top":_posiTop "px ","display":"block"});//위치 설정 } $(function(){ $(".btn1").click(function(){ 팝업 ($("#div1")); }) $(".btn2").click( function(){ popup($("#div2")); }); }); --> // 현재 창은 수직 중앙에 있습니다 함수 팝업(popupName){ _windowHeight = $(".wrap").height(),//현재 창 높이 가져오기 _windowWidth = $(".wrap").width(), //현재 창 너비 가져오기 _popupHeight = popupName.height(),//팝업 레이어 높이 가져오기 _popupWeight = popupName.width( );//팝업 레이어 너비 가져오기 _posiTop = (_windowHeight - _popupHeight)/2; _posiLeft = (_windowWidth - _popupWeight)/2; popupName.css({"left": _posiLeft "px" ,"top":_posiTop "px","display":" block"});//위치 설정 } $(function(){ $(".btn1").click( function(){ popup($("#div1" )); }); $(".btn2").click(function(){ popup($("# div2")); }); ); 나는 현재 창이다, 나는 현재 창이다 , 나는 현재 창입니다, 나는 현재 창입니다, 나는 현재 창입니다 나는 현재 창입니다, 나는 현재 창입니다, 나는 현재 창입니다 나는 현재 창입니다, 나는 현재 창입니다 나는 현재 창입니다 현재 창, 나는 현재 창입니다 나는 현재 창입니다, 나는 현재 창입니다, 나는 현재 창입니다 나는 현재 창입니다, 나는 현재 창입니다, 나는 현재 창입니다

나는 현재 창입니다, 나는 현재 창입니다, 나는 현재 창입니다, 나는 현재 창입니다 나는 팝업 창 1111 &lt ;br>나는 팝업창 1111이다 나는 팝업창 1111이다 나는 팝업창 1111이다 나는 팝업창 1111이다 나는 팝업창 1111이다 나는 팝업창 1111이다 나는 팝업창 1111 나는 팝업창 2222 나는 팝업창 2222 나는 팝업창 2222 나는 팝업창 2222 /html>