iframe的子页面怎样操作父页屏蔽页面弹出层效果


本文摘自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》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...