今天小编跟大家讲解下有关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="https://www.aidi.net.cn//web/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); -moz-opacity: 0.8; 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=""onclick="parent.window.showDiv()">查看</a>来源：爱蒂网
