iframe 하위 페이지는 상위 페이지를 운영하며 페이지 팝업 레이어_HTML/Xhtml_웹 페이지 제작을 차단하는 효과를 얻습니다.-HTML 튜토리얼-php.cn

질문: index.html에서 iframe은 son.html에서 작업을 클릭하여 전체 페이지를 차단하고 표시할 레이어를 팝업하는 방법을 소개합니다. 준비: index.html son.html 아이디어: 1: index.html의 iframe에 son.html을 도입합니다.

코드 복사 코드는 다음과 같습니다. resDiv" class="resDiv "> &lt ;/iframe>

둘: 차폐 레이어와 콘텐츠 표시 레이어 추가 index.html 본문 부분에

코드 복사 코드는 다음과 같습니다.

3: index.html에서 div 스타일을 설정하고 열기 및 열기 방법을 구현합니다. 레이어 닫기

코드 복사 코드는 다음과 같습니다. #BgLayer { 배경: # 939393 없음 반복 스크롤 0 0 높이:100% 너비:100%; ; top:0; filter: alpha(opacity=80); / * IE */ -moz-opacity: 0.8; /* Moz FF */ z-index: } #레이어 { 너비: 400px; 높이: 400px; 여백: -180px 0 0 -170px 왼쪽: 상단: 50 %; 위치: 절대; 배경: z -색인: 10001; 테두리: 1px } > /*페이지 표시* / function showDiv) { var bg = document.getElementById("BgLayer") var con = document.getElementById("Layer"); //var w = document.documentElement.clientWidth; //웹페이지의 표시 영역 너비 //var h = document.documentElement.clientHeight;/ /웹페이지의 표시 영역 높이 var w = document.body.scrollWidth; //웹페이지 전체 텍스트의 너비 var h = document.body.scrollHeight; 웹페이지 높이 // Alert(w "-" h) bg.style.display = "" bg.style.width = w "px" bg.style .height = h "px"; con.style.display = ""; } /*Close*/ function closeDiv() { var bg = document.getElementById( "BgLayer"); var con = document.getElementById("Layer"); bg.style.display = "none"; con.style.display = "none";

4: son.html의 작업이 상위 페이지 메소드를 호출합니다.

코드 코드는 다음과 같습니다.