头闻号

灵寿县鸿展矿产品加工厂

电气石|麦饭石|重晶石|沙石、砾石、卵石|其他建筑装修施工|花岗岩

首页 > 新闻中心 > 科技常识:iframe子页面操作父页面并实现屏蔽页面弹出层效果
科技常识:iframe子页面操作父页面并实现屏蔽页面弹出层效果
发布时间:2024-12-23 18:11:53        浏览次数:4        返回列表

今天小编跟大家讲解下有关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>

来源:爱蒂网