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的样式和实现打开关闭层的方法

阅读剩余部分

相关阅读 >>

iframe的跨域使用方法

<iframe>是什么?html中iframe标签的用法详解

iframe的节点初始化

使用iframe的一些小技巧

通过phonegap操作数据库的的教程详解

h5的video如何实现以及操作弹幕

html阻止iframe跳转页面并使用iframe在页面内嵌微信网页版详解

html中scrolling是什么意思

phonegap使用方法介绍(九)进行提示操作的四种方式

在html中iframe与frame有哪些区别

更多相关阅读请进入《iframe》频道 >>




打赏

取消

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

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

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

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

评论

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