Angenommen, wir haben einen Container wie folgt:
Kopieren Sie den Codecode wie folgt:
<style type="text/css">
#container{width:auto;height:auto; overflow:hidden;}
/*Das Attribut overflow:hidden; dient hier hauptsächlich dazu, den Teil außerhalb des Containers automatisch auszublenden. Der Grund, warum dieses Attribut festgelegt wird, besteht darin, das Browserkompatibilitätsproblem von IE8 und niedrigeren Versionen zu lösen*/
</style>
<div id="container" >
</div>
Jetzt möchten wir eine Div-Ebene auf der Webseite öffnen, damit der Container nicht bedient werden kann, bevor die Popup-Div-Ebene geschlossen wird.
Dann müssen wir zunächst die div-Ebene dieser Maske wie folgt definieren:
Kopieren Sie den Codecode wie folgt:
<div id="continer">
<!―Legen Sie einfach die Maskenschicht in den Behälter
<divid=“shade“ style=“width:1600px;height:900px;/*Geben Sie der Maskenebene eine Anfangsgröße*/“>
<input name=“close“ id=“close“ value=“close“>
</div>
</div>
Verwenden Sie als Nächstes js, um sicherzustellen, dass die Maskenebene immer auf dem Bildschirm angezeigt wird und der Inhalt unter der Maskenebene nicht manipuliert werden kann. Klicken Sie auf die Schaltfläche „Schließen“, um die Maskenebene zu schließen.
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
$(Funktion(){
//Ermitteln Sie die interne Breite und Höhe des aktuellen Browsers
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//Legen Sie die Breite und Höhe der Maskenebene fest
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//Stellen Sie die Schaltfläche zum Schließen so ein, dass sie in der Mitte angezeigt wird
$("#close").css("margin-top",nHeight/2-50+"px");
//Legen Sie das Ereignis fest, das ausgelöst wird, wenn sich die Browsergröße ändert
$(window).resize(function(){
//Ermitteln Sie die interne Breite und Höhe des aktuellen Browsers
varnWidth = window.innerWidth;
varnHeight = window.innerHeight;
//Legen Sie die Breite und Höhe der Maskenebene fest
$("#shade").width(nWidth);
$("#shade").height(nHeight);
//Stellen Sie die Schaltfläche zum Schließen so ein, dass sie in der Mitte angezeigt wird
$("#putPwd").css("margin-top",nHeight/2-50+"px");
});
//Setzen Sie die Schaltfläche „Schließen“, um die Maskenebene zu entfernen
$("#close").click(function(){
$("#shade").removeAttr("id");
$("#shade").html("");
});
//Es kann auch in reinem js geschrieben werden
Document.getElementById(“shade”).style…….;
//Es ist sinnlos, später mehr zu sagen. Wenn Sie interessiert sind, aber wirklich nicht schreiben können, können Sie mich kontaktieren.
})
</script>