iframe子页面操作父页面并实现屏蔽页面弹出层效果

前端技术 2023/09/09 HTML
问题：在index.html 中，iframe 引入son.html，在son.html 中如何点击某个操作，实现屏蔽整个页面，并弹出要显示的层？
准备： index.html son.html
思路：
一：index.html中iframe引入son.html ，

复制代码
代码如下:

<!-- 右侧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部分中添加屏蔽层和内容展示层

复制代码
代码如下:

<!--弹出的登录页面层-->
<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的样式和实现打开关闭层的方法

复制代码
代码如下:

<style type=\"text/css\">
#BgLayer {
background: #939393 none repeat scroll 0 0;
height:100%;
width:100%;
left:0;
top:0;
filter: alpha(opacity=80); /* IE */
-moz-opacity: 0.8; /* Moz + FF */
z-index: 10000;
}
#Layer {
width: 400px;
height: 400px;
margin: -180px 0 0 -170px;
left: 50%;
top: 50%;
position: absolute;
background: #FFF;
z-index: 10001;
border: 1px solid #1B5BAC;
}
</style>
<script type=\"text/javascript\">
/*显示页面*/
function showDiv) {
var bg = document.getElementById(\"BgLayer\");
var con = document.getElementById(\"Layer\");
//var w = document.documentElement.clientWidth; //网页可见区域宽
//var h = document.documentElement.clientHeight;//网页可见区域高
var w = document.body.scrollWidth; //网页正文全文宽
var h = document.body.scrollHeight; //网页正文全文高
// alert(w+\"-\"+h);
bg.style.display = \"\";
bg.style.width = w + \"px\";
bg.style.height = h + \"px\";
con.style.display = \"\";
}
/*关闭*/
function closeDiv() {
var bg = document.getElementById(\"BgLayer\");
var con = document.getElementById(\"Layer\");
bg.style.display = \"none\";
con.style.display = \"none\";
}
</script>


四：son.html 中某个操作调用父页面方法

复制代码
代码如下:

<a href=\"javascript:void(0)\" onclick=\"parent.window.showDiv()\">查看</a>

本文地址：https://www.stayed.cn/item/24351

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案