這次帶給大家iframe的子頁面怎樣操作父頁屏蔽頁面彈出層效果，iframe的子頁面操作父頁屏蔽頁面彈出層效果的注意事項有哪些，下面就是實戰案例，一起來看一下。
問題：在index.html 中，iframe 引入son.html，在son.html 中如何點擊某個操作，實現屏蔽整個頁面，並彈出要顯示的層？
準備： index.html son.html
想法：
一：index.html中iframe引入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结束 -->
二： index.html的body部分中新增屏蔽層和內容展示層
<!--弹出的登录页面层--> <div id="mapLayer" style="display: none; " > <input type="button" value="关闭" onclick="closeMap()" /> </div> <!--屏蔽层，用来透明的屏蔽整个页面--> <div id="mapBgLayer" style="position:absolute; display: none;"></div>
三：index.html 中設定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">
/*显示页面*/
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>四：son.html 中某個操作呼叫父頁面方法
<a href="javascript:void(0)" onclick="parent.window.showDiv()">查看</a>
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
html標準寫法與dreamweaver產生程式碼有哪些不一樣
以上是iframe的子頁面如何操作父頁屏蔽頁面彈出層效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
