아직 모른다면 아래의 간단한 예를 살펴볼 수 있습니다.
코드 사본은 다음과 같습니다.
<html>
<헤드>
<title> 창이 팝업되면 후속 레이어가 작동하지 않습니다 </title>
<cript>
함수 show () // 숨겨진 레이어 및 팝업 레이어 표시
{
var hideobj = document.getElementById ( "hidebg");
hidebg.style.display = "block"; // 숨겨진 레이어를 표시합니다
hidebg.style.height = document.body.clientHeight+"px"; // 숨겨진 레이어의 높이를 현재 페이지 높이로 설정
document.getElementById ( "hidebox"). Style.display = "block"; // 팝업 레이어를 표시합니다
}
함수 숨기기 () // 숨겨진 레이어와 팝업 레이어를 제거하십시오
{
document.getElementById ( "hidebg"). style.display = "none";
document.getElementById ( "hidebox"). style.display = "none";
}
</스크립트>
<스타일>
바디 {마진 : 0px; 패딩 : 0px; 텍스트-정렬 : 중심;}
#hidebg {위치 : 절대; 왼쪽 : 0px; 상단 : 0px;
배경색 :#000;
너비 : 100%; /*너비는 100%로 설정되므로 숨겨진 배경 레이어가 원래 페이지를 덮을 수 있습니다*/
필터 : 알파 (불투명도 = 60); /*투명성 설정 60%*/
불투명도 : 0.6; /*비 EIE 브라우저에서 투명성을 60%로 설정*/
디스플레이 : 없음; / * //www.vevb.com */
z- 안수 : 2;}
#hidebox {위치 : 절대; 너비 : 400px; 높이 : 300px; 상단 : 200px; 왼쪽 : 30%; 배경색 : #ffff; 디스플레이 : 없음; 커서; 포인터; z-index : 3;}
#Content {Text-Align : Center; Cursor : Pointer; z-index : 1;}
</스타일>
</head>
<body>
<div id = "hidebg"> </div>
<div id = "hidebox"onclick = "hide ();"> 닫으려면 </div>를 클릭하십시오
<div id = "content"onclick = "show ();"> 클릭하여 </div>를 클릭하십시오
</body>
</html>