Analyse des Prinzips des Maskenebeneneffekts unter Verwendung reiner js_javascript-Kenntnisse

Man kann sagen, dass diese Funktion, nachdem ich die vorherige „Schlange“ verstanden habe, sich wirklich stark von der Schwierigkeit unterscheidet, die ich mir zuerst vorgestellt habe. Natürlich ist diese Methode etwas knifflig, aber sie hat die Funktion doch erreicht . Organisieren

1. Implementierungsprinzip
Das Implementierungsprinzip dieses Artikels ist wie folgt:

* Tatsächlich ist die Popup-Ebene Maskenebene und Originalseite Die Anzeige ist in drei verschiedene Divs unterteilt

* Die Ebene der Popup-Ebene liegt über der Maskenebene und die Ebene der Maskenebene liegt über der Originalseitenanzeige

* Die Maskenebene hat einen Transparenzeffekt

* Die Maskenebene hat keine praktische Bedeutung, daher ist es nicht erforderlich, sie in den HTML-Teil zu schreiben. Dies kann natürlich auch durch Schreiben erreicht werden


2. Code-Implementierung
Die HTML-Sprache ist wie folgt:

Code kopieren Der Code lautet wie folgt:

div id="alert" style="display:none;"> ;input type="password">

🎜>






Javascript implementiert Popup-Ebene und Maskenebene:




Code kopieren


Der Code lautet wie folgt:


function show(){
var alarmPart=document.getElementById("alert");
alertPart.style. display="block";
alertPart.style.position = "absolute";
alertPart.style.top = "50%";
alertPart.style.left = "50%";
alertPart.style.marginTop = "-75px"; = "-150px";

alertPart.style.background="cyan";
alertPart.style.width="300px"; style.zIndex = "501";

var mybg = document.createElement("div"); mybg.setAttribute("id","mybg"); = "#000"; mybg.style.width = "100%"; mybg.style.height = "100 %"; mybg.style.position = "absolute"; mybg.style.top = "0"; mybg.style.left = "0"; mybg.style.zIndex = "500";

mybg.style.opacity = "0.3"; 🎜>mybg.style.filter = "Alpha(opacity=30)";

document.body.appendChild(mybg);

document.body.style.overflow = "hidden"; }



Z-Index wird hier verwendet, um Ebenen, Deckkraft und Filter zu unterscheiden: Alpha (Opazität=) Transparenz, document.createElement("div ") und document.body.appendChild() sind alle schon einmal aufgetaucht und angewendet worden, sodass wir dies erreichen können. In der Tat, wenn Sie das Prinzip verstehen, wird alles viel einfacher.

Der Weg ist lang und lang.