suchen
HeimWeb-FrontendHTML-TutorialSo bedienen Sie die übergeordnete Seite einer untergeordneten Iframe-Seite, um den Effekt der Seiten-Popup-Ebene zu blockieren

Dieses Mal zeige ich Ihnen, wie Sie die Unterseite eines Iframes bedienen, um den Seiten-Popup-Layer-Effekt der übergeordneten Seite zu blockieren. Was sind die Vorsichtsmaßnahmen zur Bedienung der Unterseite? Seite eines Iframes, um den Seiten-Popup-Layer-Effekt der übergeordneten Seite zu blockieren. Hier ist der eigentliche Kampf. Schauen wir uns den Fall an.

Frage: In index.html führt iframe son.html ein. Wie klicke ich auf einen Vorgang in son.html, um die gesamte Seite zu blockieren und die anzuzeigende Ebene anzuzeigen?
Vorbereitung: index.html son.html
Ideen:
Eins: Son.html in den Iframe in index.html einführen,

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

Zwei: den Körper von index.html Fügen Sie die Abschirmungsebene und die Inhaltsanzeigeebene im Abschnitt

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

hinzu. Drei: Legen Sie den Stil des Div in index.html fest und implementieren Sie die Methode zum Öffnen und Schließen der Ebene

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

Viertens: son.html Medium Eine bestimmte Operation ruft die Methode der übergeordneten Seite auf

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

Ich glaube, dass Sie die Methode nach dem Lesen dieser Fälle beherrschen. Weitere spannende Informationen erhalten Sie zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Was sind die Unterschiede zwischen Standard-HTML-Schreiben und von Dreamweaver generiertem Code?

HR horizontal line in HTML So verwenden Sie

HTML So erzielen Sie gemischte Grafiken und Texte

So verwenden Sie Iframe zum Einbetten anderer Webinhalte Seiten in der aktuellen Webseite

Das obige ist der detaillierte Inhalt vonSo bedienen Sie die übergeordnete Seite einer untergeordneten Iframe-Seite, um den Effekt der Seiten-Popup-Ebene zu blockieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Erläutern Sie die Bedeutung der Verwendung eines konsistenten Codierungsstils für HTML -Tags und -attribute.Erläutern Sie die Bedeutung der Verwendung eines konsistenten Codierungsstils für HTML -Tags und -attribute.May 01, 2025 am 12:01 AM

Ein konsistenter HTML -Codierungsstil ist wichtig, da er die Lesbarkeit, Wartbarkeit und Effizienz des Codes verbessert. 1) Verwenden Sie Kleinbuchstaben und Attribute, 2) Behalten Sie die konsistente Einklebung, 3) Wählen und halten Sie sich an Einzel- oder Doppelzitate.

Wie implementieren Sie Multi-Project-Karussell in Bootstrap 4?Wie implementieren Sie Multi-Project-Karussell in Bootstrap 4?Apr 30, 2025 pm 03:24 PM

Lösung zur Implementierung von Multi-Project-Karussell in Bootstrap4, das Multi-Project-Karussell in Bootstrap4 implementiert, ist keine leichte Aufgabe. Obwohl Bootstrap ...

Wie erreicht die offizielle Website von Deepseek den Effekt des durchdringenden Maus -Scroll -Events?Wie erreicht die offizielle Website von Deepseek den Effekt des durchdringenden Maus -Scroll -Events?Apr 30, 2025 pm 03:21 PM

Wie kann man den Effekt der Penetration des Maus -Scroll -Ereignisses erreichen? Wenn wir im Internet stöbern, begegnen wir oft auf spezielle Interaktionsdesigns. Zum Beispiel auf der offiziellen Website von Deepseek � ...

So ändern Sie den Wiedergabesteuerungsstil von HTML -VideoSo ändern Sie den Wiedergabesteuerungsstil von HTML -VideoApr 30, 2025 pm 03:18 PM

Der Standard -Playback -Steuerungsstil von HTML -Video kann nicht direkt über CSS geändert werden. 1. Erstellen Sie benutzerdefinierte Steuerelemente mit JavaScript. 2. verschönern diese Kontrollen durch CSS. 3. Berücksichtigen Sie Kompatibilität, Benutzererfahrung und -leistung. Wenn Sie Bibliotheken wie Video.js oder PLYR verwenden, können Sie den Prozess vereinfachen.

Welche Probleme werden durch die Verwendung von nativem Select auf Ihrem Telefon verursacht?Welche Probleme werden durch die Verwendung von nativem Select auf Ihrem Telefon verursacht?Apr 30, 2025 pm 03:15 PM

Potenzielle Probleme bei der Verwendung natives Auswahl von Mobiltelefonen bei der Entwicklung mobiler Anwendungen haben wir häufig auf die Auswahl von Kästchen. Normalerweise Entwickler ...

Was sind die Nachteile der Verwendung von nativen Auswahl auf Ihrem Telefon?Was sind die Nachteile der Verwendung von nativen Auswahl auf Ihrem Telefon?Apr 30, 2025 pm 03:12 PM

Was sind die Nachteile der Verwendung von nativen Auswahl auf Ihrem Telefon? Bei der Entwicklung von Anwendungen auf mobilen Geräten ist es sehr wichtig, die richtigen UI -Komponenten auszuwählen. Viele Entwickler ...

Wie optimieren Sie die Kollisionsabwicklung von Dritten in einem Raum mit drei.Js und Octree?Wie optimieren Sie die Kollisionsabwicklung von Dritten in einem Raum mit drei.Js und Octree?Apr 30, 2025 pm 03:09 PM

Verwenden Sie drei.Js und Octree, um die Kollisionsabwicklung von Drittrohr im Raum zu optimieren. Verwenden Sie Octree in drei.js, um das Roaming von Drittpersonen im Raum zu implementieren, und fügen Sie Kollisionen hinzu ...

Auf welche Probleme werden Sie bei der Verwendung von nativem Select -Select auf Ihrem Telefon stoßen?Auf welche Probleme werden Sie bei der Verwendung von nativem Select -Select auf Ihrem Telefon stoßen?Apr 30, 2025 pm 03:06 PM

Probleme mit nativen Auswahl von Mobiltelefonen Bei der Entwicklung von Anwendungen auf mobilen Geräten stellen wir häufig Szenarien auf, in denen Benutzer Entscheidungen treffen müssen. Obwohl einheimische SEL ...

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

Sicherer Prüfungsbrowser

Sicherer Prüfungsbrowser

Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.

SublimeText3 Linux neue Version

SublimeText3 Linux neue Version

SublimeText3 Linux neueste Version

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

PHPStorm Mac-Version

PHPStorm Mac-Version

Das neueste (2018.2.1) professionelle, integrierte PHP-Entwicklungstool