The iframe child page operates the parent page and implements the effect of shielding the page pop-up layer

<!-- Right iframe starts-->
<div id="resDiv" class="resDiv">
<iframe name="res" class="iframestyle" allowtransparency="true" src="son.html" frameborder="0" scrolling="no"></iframe>
</div>
<!-- End of right iframe -->

<!--Pop-up login page layer-->
<div id="mapLayer" style="display: none; " >
<input type="button" value="Close" onclick="closeMap()" />
</div>
<!--Shielding layer, used to transparently shield the entire page-->
<div id="mapBgLayer" style="position:absolute; display: none;"></div>

<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">
/*Display page*/
function showDiv) {
var bg = document.getElementById("BgLayer");
var con = document.getElementById("Layer");
//var w = document.documentElement.clientWidth; //Width of visible area of ​​web page
//var h = document.documentElement.clientHeight; //Height of visible area of ​​web page
var w = document.body.scrollWidth; //Full text width of the webpage
var h = document.body.scrollHeight; //Height of the full text of the web page
// alert(w+"-"+h);
bg.style.display = "";
bg.style.width = w + "px";
bg.style.height = h + "px";
con.style.display = "";
}
/*closure*/
function closeDiv() {
var bg = document.getElementById("BgLayer");
var con = document.getElementById("Layer");
bg.style.display = "none";
con.style.display = "none";
}
</script>

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