| 标题 | iframe子页面操作父页面并实现屏蔽页面弹出层效果 |
| 内容 | 问题：在index.html 中，iframe 引入son.html，在son.html 中如何点击某个操作，实现屏蔽整个页面，并弹出要显示的层？ 准备： index.html son.html 思路： 一：index.html中iframe引入son.html ， 代码如下: <!-- 右侧iframe开始 --> <div id="resDiv"> <iframe name="res" allowtransparency="true" src="son.html" frameborder="0" scrolling="no"></iframe> </div> <!-- 右侧iframe结束 --> 二： index.html的body部分中添加屏蔽层和内容展示层 代码如下: <!--弹出的登录页面层--> <div id="mapLayer" > <input type="button" value="关闭" onclick="closeMap()" /> </div> <!--屏蔽层，用来透明的屏蔽整个页面--> <div id="mapBgLayer"></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> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。