How to operate the parent page of an iframe child page to block the page pop-up layer effect

This time I will show you how to operate the parent page of an iframe to block the page pop-up layer effect. How to operate the parent page of an iframe to block the page pop-up layer effect. What are the precautions? , here is the actual combat Let’s take a look at the case.

Question: In index.html, iframe introduces son.html. How to click an operation in son.html to block the entire page and pop up the layer to be displayed?
Preparation: index.html son.html
Ideas:
One: iframe in index.html introduces son.html,

<!-- 右侧iframe开始 --> 
<div id="resDiv" class="resDiv"> 
<iframe name="res" class="iframestyle" allowtransparency="true" src="son.html" frameborder="0" scrolling="no"></iframe> 
</div> 
<!-- 右侧iframe结束 -->

2: In the body part of index.html Add shielding layer and content display layer

<!--弹出的登录页面层--> 
<div id="mapLayer" style="display: none; " > 
<input type="button" value="关闭" onclick="closeMap()" /> 
</div> 
<!--屏蔽层，用来透明的屏蔽整个页面--> 
<div id="mapBgLayer" style="position:absolute; display: none;"></div>

Three: Set the style of div in index.html and implement the method of opening and closing the layer

<style type="text/css"> 
#BgLayer { 
background: #939393 none repeat scroll 0 0; 
height:100%; 
width:100%; 
left:0; 
top:0; 
filter: alpha(opacity=80); /* IE */ 
-moz-opacity: 0.8; /* Moz + FF */ 
z-index: 10000; 
} 
#Layer { 
width: 400px; 
height: 400px; 
margin: -180px 0 0 -170px; 
left: 50%; 
top: 50%; 
position: absolute; 
background: #FFF; 
z-index: 10001; 
border: 1px solid #1B5BAC; 
} 
</style> 
<script type="text/javascript"> 
/*显示页面*/ 
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 = ""; 
} 
/*关闭*/ 
function closeDiv() { 
var bg = document.getElementById("BgLayer"); 
var con = document.getElementById("Layer"); 
bg.style.display = "none"; 
con.style.display = "none"; 
} 
</script>

Four: Call the parent page for an operation in son.html Method

<a href="javascript:void(0)" onclick="parent.window.showDiv()">查看</a>

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

What are the differences between the standard writing method of HTML and the code generated by Dreamweaver

The hr horizontal line in HTML How to use

htmlHow to achieve mixed graphics and text

How to use iframe to embed other web pages in the current web page

The above is the detailed content of How to operate the parent page of an iframe child page to block the page pop-up layer effect. For more information, please follow other related articles on the PHP Chinese website!