Analyse des Prinzips des Maskenebeneneffekts unter Verwendung reiner js

Analyse des Prinzips des Maskenebeneneffekts unter Verwendung reiner js_javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 16:46:53

Original

1363 Leute haben es durchsucht

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