다음과 같은 컨테이너 컨테이너가 있다고 가정합니다.
다음과 같이 코드 코드를 복사합니다.
<스타일 유형="텍스트/css">
#컨테이너{너비:자동;높이:자동;오버플로:숨김;}
/*여기서 Overflow:hidden; 속성은 주로 컨테이너 밖의 부분을 자동으로 숨기도록 설정하는 것입니다. 이 속성을 설정한 이유는 IE8 이하 버전의 브라우저 호환성 문제를 해결하기 위해서입니다.*/
</style>
<div id="컨테이너" >
</div>
이제 팝업 div 레이어를 닫기 전에는 컨테이너가 작동할 수 없도록 웹 페이지에 div 레이어를 팝업해 보겠습니다.
그런 다음 먼저 이 마스크의 div 레이어를 다음과 같이 정의해야 합니다.
다음과 같이 코드 코드를 복사합니다.
<div id="컨티너">
<!―마스크 레이어를 용기 안에 넣기만 하면 됩니다
<divid=”shade” style=”width:1600px;height:900px;/*마스크 레이어에 초기 크기 지정*/”>
<입력 이름=”닫기” id=”닫기” 값=”닫기”>
</div>
</div>
다음으로 js를 사용하여 마스크 레이어가 화면에 항상 표시되도록 하고 마스크 레이어 아래의 콘텐츠를 조작할 수 없도록 만들기 위해 닫기 버튼을 클릭하여 마스크 레이어를 닫습니다.
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
$(함수(){
//현재 브라우저의 내부 너비와 높이를 가져옵니다.
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//마스크 레이어의 너비와 높이를 설정합니다.
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//닫기 버튼이 중앙에 표시되도록 설정
$("#close").css("margin-top",nHeight/2-50+"px");
//브라우저 크기가 변경될 때 트리거되는 이벤트를 설정합니다.
$(창).resize(함수(){
//현재 브라우저의 내부 너비와 높이를 가져옵니다.
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//마스크 레이어의 너비와 높이를 설정합니다.
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//닫기 버튼이 중앙에 표시되도록 설정
$("#putPwd").css("margin-top",nHeight/2-50+"px");
});
//마스크 레이어를 제거하기 위해 닫기 버튼을 설정합니다.
$("#close").click(함수(){
$("#shade").removeAttr("id");
$("#shade").html("");
});
//순수한 js로도 작성할 수 있습니다.
Document.getElementById(“shade”).style…….;
//나중에 더 이야기해도 소용없습니다. 관심이 있지만 어떻게 쓰는지 모르신다면 저에게 연락해주세요.
})
</script>