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

PHP中文网 JavaScript 百度已收录

本文摘自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跳转页面并使用iframe在页面内嵌微信网页版详解

iframe的去边框和无边框有哪些操作方式

iframe怎么用

如何使用iframe在当前网页中嵌入其他网页

在html中iframe与frame有哪些区别

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

教你在iframe标签中制作滚动条样式，iframe标签的用法介绍

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

iframe网页内部的导航窗口的浅析

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

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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