本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带来iframe的子页面怎样操作父页屏蔽页面弹出层效果,iframe的子页面操作父页屏蔽页面弹出层效果的注意事项有哪些,下面就是实战案例,一起来看一下。问题:在index.html 中,iframe 引入son.html,在son.html 中如何点击某个操作,实现屏蔽整个页面,并弹出要显示的层?
准备: index.html son.html
思路:
一:index.html中iframe引入son.html ,
1 2 3 4 5 | <!-- 右侧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部分中添加屏蔽层和内容展示层
1 2 3 4 5 6 | <!--弹出的登录页面层-->
<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的样式和实现打开关闭层的方法
阅读剩余部分
相关阅读 >>
html iframe标签怎么使用?html iframe标签的使用实例介绍
iframe是什么标签
html中iframe标签有哪些用法
video屏蔽下载功能
使用iframe的一些小技巧
html中iframe如何使用?html中iframe标签用途的介绍
phonegap使用方法介绍(九)进行提示操作的四种方式
html中form与表单提交操作的方法总结
iframe的跨域使用方法
jquery 如何判断iframe是否加载完成
更多相关阅读请进入《iframe》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » iframe的子页面怎样操作父页屏蔽页面弹出层效果