Es kann gesagt werden, dass diese Funktion, nachdem ich die vorherige "Schlange" verstanden habe, wirklich viel weniger schwierig ist, als ich es mir zu Beginn vorgestellt habe. Natürlich wird diese Methode verdächtigt, schwierig zu sein, und letztendlich wurde die Funktion implementiert. Lassen Sie es uns analysieren und organisieren.
1. Implementierungsprinzip
Das Implementierungsprinzip dieses Artikels lautet wie folgt:
* Tatsächlich sind die Popup-Ebene, die Maskenschicht und die Original-Seitenanzeige drei verschiedene Divs
* Die Ebene der Popup-Ebene befindet sich über der Maskenschicht, und die Ebene der Maskenebene befindet sich über der Original-Seitenanzeige.
* Die Maskenschicht hat einen klaren Effekt
* Die Maskenschicht hat keine praktische Bedeutung, daher muss sie nicht auf dem HTML -Teil geschrieben werden. Natürlich kann es auch nach dem Schreiben realisiert werden.
2. Code -Implementierung
Die HTML -Sprache lautet wie folgt:
Die Codekopie lautet wie folgt:
<html>
....
<body>
<Center>
<div> <Eingabe type = "button" value = "go" onclick = "show ()"> </div>
<div id = "alert" style = "display: keine;">
<form>
Einloggen
<Eingabe type = "text"> <Eingabe type = "password"> <Eingabe type = "value =" login ">
</form>
</div>
</center>
</body>
</html>
JavaScript implementiert die Popup-Schicht und die Maskenschicht:
Die Codekopie lautet wie folgt:
<span style = "Schriftgröße: 12px;"> Funktion show () {
var AlertPart = document.getElementById ("alert");
alertPart.Style.display = "Block";
alertPart.Style.position = "Absolute";
alertPart.Style.top = "50%";
alertPart.Style.left = "50%";
alertPart.Style.Margintop = "-75px";
alertPart.Style.Marginleft = "-150px";
alertPart.Style.background = "Cyan";
alertPart.Style.width = "300px";
alertPart.Style.Height = "200px";
alertPart.Style.zindex = "501";
var mybg = document.createelement ("div");
mybg.setattribute ("id", "mybg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "absolut";
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";
}
</script> </span>
Hier verwenden wir Z-Index, um Hierarchien, Opazität und Filter zu unterscheiden: Alpha (Opazität =) Transparenz, Dokument.Createelement ("Div") und document.body.AppendChild (), diese werden alle zuvor verwendet, damit wir sie erreichen können. Wenn das Prinzip verstanden wird, wird alles viel einfacher.
Die Straße ist lang und mühsam