다음과 같은 컨테이너 컨테이너가 있다고 가정합니다. 코드 복사 코드는 다음과 같습니다. <br>#container{width:auto;height:auto; Overflow:hidden;} <br>/*여기서 Overflow:hidden 속성은 주로 다음 부분을 설정하는 것입니다. 컨테이너를 자동으로 숨기는 이유는 ie8 이하 버전의 브라우저 호환성 문제를 해결하기 위함입니다*/ <br> > 이제 팝업 div 레이어를 닫기 전에 컨테이너가 작동하지 않도록 웹 페이지에 div 레이어를 팝업해야 합니다. 그런 다음 먼저 이 마스크의 div 레이어를 다음과 같이 정의해야 합니다. 코드 복사 코드는 다음과 같습니다. 다음: div> 다음 단계는 js를 사용하여 마스크 레이어가 항상 화면에 표시되고 마스크 레이어 아래의 콘텐츠를 조작할 수 없도록 만드는 것입니다. 마스크 레이어 닫기 버튼 코드 복사 코드는 다음과 같습니다. <div class="codebody" id="code93315">$(function(){ <br>//현재 브라우저의 내부 너비와 높이 가져오기<br>varnWidth = window.innerWidth; <br>varnHeight = window.innerHeight ; <br>//마스크 레이어 너비 및 높이 설정<br>$("#shade").width(nWidth) <br>$("#shade").height(nHeight); 닫기 버튼을 가운데로 설정 <br>$( "#close").css("margin-top",nHeight/2-50 "px") <br>//브라우저가 실행될 때 트리거되는 이벤트를 설정합니다. 크기 변경<br>$(window).resize(function (){ <br>//현재 브라우저의 내부 너비와 높이 가져오기<br>varnWidth = window.innerWidth; <br>varnHeight = window.innerHeight; <br>//마스크 레이어의 너비와 높이 설정<br>$("#shade").width(nWidth) <br>$("#shade").height(nHeight); 닫기 버튼을 가운데로 설정 <br>$("#putPwd") .css("margin-top",nHeight/2-50 "px") <br>})//닫기 설정 마스크 레이어를 제거하는 버튼<br>$("#close").click( function(){ <br>$("#shade").removeAttr("id"); <br>$("#shade" ).html(""); <br>}); <br>// 순수 js를 사용하여 <br>Document.getElementById(“shade”).style…을 작성할 수도 있습니다. 나중에 더 이야기해도 소용없습니다. 관심이 있지만 어떻게 쓰는지 모르신다면 저에게 연락해주세요. <br>}) <br>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
