首頁  >  文章  >  web前端  >  iframe的子頁面如何操作父頁屏蔽頁面彈出層效果

iframe的子頁面如何操作父頁屏蔽頁面彈出層效果

php中世界最好的语言
php中世界最好的语言原創
2018-02-06 10:12:312941瀏覽

這次帶給大家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產生程式碼有哪些不一樣

在HTML裡的hr水平線應該如何使用

html怎麼實作圖文混排

#如何使用iframe在目前網頁中嵌入其他網頁

#

以上是iframe的子頁面如何操作父頁屏蔽頁面彈出層效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn