问题:在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="/UploadFiles/2021-03-30/son.html"></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>
准备: index.html son.html
思路:
一:index.html中iframe引入son.html ,
复制代码代码如下:
<!-- 右侧iframe开始 -->
<div id="resDiv" class="resDiv">
<iframe name="res" class="iframestyle" allowtransparency="true" src="/UploadFiles/2021-03-30/son.html"></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>
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“iframe子页面操作父页面并实现屏蔽页面弹出层效果”评论...
更新日志
2024年05月20日
2024年05月20日
- 张琍敏1978-雪中莲[台湾复刻版][WAV+CUE]
- 叶蕴仪1993-睡美人[日本版][WAV+CUE]
- 夜晚助兴音乐-群星《新时代床头音乐-性能量》2CD[WAV]
- 24K德国HD金碟《历届奥斯卡获奖金曲》3CD[WAV整轨]
- 邰正宵《重燃爱恋 贰 Walk On》[FLAC/分轨][431.72MB]
- 苏文劭《雨停出来走走》[320K/MP3][81.11MB]
- 苏文劭《雨停出来走走》[FLAC/分轨][210.76MB]
- 群星《2024好听新歌04》十倍音质WAV分轨
- 陈宁《弹指之间HQ》头版限量[低速原抓WAV+CUE]
- 陈宁《故人还》HQCDII限量签名版[低速原抓WAV+CUE]
- 苏文劭《春曲(Lessons)》[320K/MP3][39.8MB]
- 苏文劭《春曲(Lessons)》[FLAC/分轨][97.78MB]
- 群星《2006香港高级视听展原音精选 SACD》[ISO][2G]
- 张琍敏1977-枫林小雨[台湾复刻版][WAV+CUE]
- 林一峰2014-COOKINGMUSIC[香港首版][WAV+CUE]