这次给大家带来iframe的子页面怎样操作父页屏蔽页面弹出层效果，iframe的子页面操作父页屏蔽页面弹出层效果的注意事项有哪些，下面就是实战案例，一起来看一下。
问题：在index.html 中，iframe 引入son.html，在son.html 中如何点击某个操作，实现屏蔽整个页面，并弹出要显示的层？
准备： index.html son.html
思路：
一：index.html中iframe引入son.html ，
二： index.html的body部分中添加屏蔽层和内容展示层
三：index.html 中设置div的样式和实现打开关闭层的方法
#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; } /*显示页面*/ 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"; }
四：son.html 中某个操作调用父页面方法
相信看了这些案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
相关阅读：
html标准写法与dreamweaver生成代码有哪些不一样
在HTML里的hr水平线应该如何使用
html怎样实现图文混排
如何使用iframe在当前网页中嵌入其他网页
以上就是iframe的子页面怎样操作父页屏蔽页面弹出层效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1545784.html
微信扫一扫 
支付宝扫一扫 
