這次帶給大家iframe的子頁面怎樣操作父頁屏蔽頁面彈出層效果,iframe的子頁面操作父頁屏蔽頁面彈出層效果的注意事項有哪些,下面就是實戰案例,一起來看一下。
問題:在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>
相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
html標準寫法與dreamweaver產生程式碼有哪些不一樣
以上是iframe的子頁面如何操作父頁屏蔽頁面彈出層效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!