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

阅读剩余部分

相关阅读 >>

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

layui打开的layer的iframe窗口怎么关闭

phonegap实现提示操作详解

解决iframe嵌套页面无法全屏的问题

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

iframe的各项参数

如何在html中引入外部页面(iframe标签法)

html如何嵌套页面?<iframe>标签告诉你答案

使用iframe的一些小技巧

深入解析html5 内联框架--iframe

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




打赏

取消

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

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

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

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

评论

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