Comment faire fonctionner la page parent d'une page enfant iframe pour bloquer l'effet de calque contextuel de la page-tutoriel HTML-php.cn

Comment faire fonctionner la page parent d'une page enfant iframe pour bloquer l'effet de calque contextuel de la page

php中世界最好的语言

Libérer： 2018-02-06 10:12:31

original

2978 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser la sous-page d'une iframe pour bloquer l'effet de couche contextuelle de la page parent. Quelles sont les précautions sur la façon d'utiliser la sous-page. page d'une iframe pour bloquer l'effet de calque pop-up de la page parent Voici le combat réel. Jetons un coup d'œil au cas.

Question : Dans index.html, iframe introduit son.html Comment cliquer sur une opération dans son.html pour bloquer la page entière et faire apparaître le calque à afficher ?
Préparation : index.html son.html
Idées :
Une : introduire son.html dans l'iframe dans index.html,

<!-- 右侧iframe开始 --> 
<div id="resDiv" class="resDiv"> 
<iframe name="res" class="iframestyle" allowtransparency="true" src="son.html" frameborder="0" scrolling="no"></iframe> 
</div> 
<!-- 右侧iframe结束 -->

Copier après la connexion

Deux : le corps de index.html Ajoutez la couche de protection et la couche d'affichage du contenu dans la section

<!--弹出的登录页面层--> 
<div id="mapLayer" style="display: none; " > 
<input type="button" value="关闭" onclick="closeMap()" /> 
</div> 
<!--屏蔽层，用来透明的屏蔽整个页面--> 
<div id="mapBgLayer" style="position:absolute; display: none;"></div>

Copier après la connexion

Trois : définissez le style du div dans index.html et implémentez la méthode d'ouverture et de fermeture de la couche

<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>

Copier après la connexion

Quatre : son.html Moyen Une certaine opération appelle la méthode de la page parent

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

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez faire attention. vers d'autres articles connexes sur le site Web PHP chinois !

Lecture connexe :

Quelles sont les différences entre l'écriture HTML standard et le code généré par Dreamweaver

Ligne horizontale RH dans HTML Comment utiliser

html Comment obtenir des graphiques et du texte mixtes

Comment utiliser iframe pour intégrer d'autres sites Web pages de la page Web actuelle

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!