Stellungnahme
Das Lesen dieses Artikels erfordert ein bestimmtes grundlegendes HTML, CSS und JavaScript
Design
Die Idee, den Popup-Schicht-Effekt zu erreichen, ist sehr einfach: Verblenden Sie den zuerst angezeigten Inhalt aus und zeigen Sie den ursprünglich versteckten Inhalt nach Auslösen einer bestimmten Bedingung an (z. B. Klicken auf eine Schaltfläche).
erreichen
<! DocType html> <html> <kopf> <titels> Fensterobjekt </title> <meta charset = "utf-8"> </head> <body> <a href = "http://www.baidu.com"> baidu </a> </butty = "button =" button "button" button ". Lichtblau; Grenze: 1px fest grün; ID = "Toast"> <!-Setzen Sie das Anzeigeattribut auf None, um den Inhalt auszublenden-> <p> Dies ist der Inhalt der Popup-Ebene </p> <button type = "button" id = "schließen"> Schließen Sie die Popup-Ebene </button> </div> <script type = "text/javaScript"> var toast = document.getByid ("toast"); document.getElementById ("öffnen"). onclick = function (e) {<!-Das Klickereignis definieren, um versteckten Inhalt anzuzeigen-> Toast.Style.display = "Block"; toast.style.position = "fixed"; var winwidth = window.innnerwidth; var windheight = window.innerHeight; var targetwidth = toast.offsetwidth; var taretheighth = toast.offseteight; toast.style.top = (winHeight - taretheight) / 2 + "px"; Toast.Style.Left = (Winwidth - Zielbreite) / 2 + "px"; } document.getElementById ("close"). onclick = function (e) {<!-den angezeigten Inhalt noch einmal ausblenden-Toast.style.display = "None"; } </script> </body> </html>Der Anzeigeeffekt ist wie folgt:
Wir können jedoch feststellen, dass wir nach dem Versteck in den versteckten Inhalten die Baidu -Seite über den Link weiterhin eingeben können. Um dies zu verhindern, können wir eine Maskenebene bereitstellen, um alle Original -Seiteninhalte abzudecken. Der Code ist wie folgt:
<! DocType html> <html> <Head> <titels> Fensterobjekt </title> <meta charset = "utf-8"> </head> <body> <a href = "http://www.baidu.com"> baidu </a> </buttht type = "button" styLLE ". behoben; Breite: 100%; Höhe: 100%; oben: 0px; links: 0px; Hintergrund: grau; "> <!-Maskieren Sie den Hintergrund durch die Maskenschicht-> <div style =" Hintergrund: hellblau; Border: 1px fest grün; " ID = "Toast"> <!-Setzen Sie die Anzeigeattribut auf None, um den Inhalt auszublenden. var cover = document.getElementById ("Cover"); document.getElementById ("öffnen"). onclick = function (e) {<!-das Klickenereignis definieren, um versteckten Inhalt anzuzeigen-> cover.style.display = "block"; toast.style.position = "fixed"; var winwidth = window.innnerwidth; var windheight = window.innerHeight; var targetwidth = toast.offsetwidth; var taretheighth = toast.offseteight; toast.style.top = (winHeight - taretheight) / 2 + "px"; Toast.Style.Left = (Winwidth - Zielbreite) / 2 + "px"; } document.getElementById ("close"). onclick = function (e) {<!-den angezeigten Inhalt noch einmal ausblenden Sie. } </script> </body> </html>Dies ist erneut das folgende Testergebnis, wie in der folgenden Abbildung gezeigt:
Zusammenfassen
Der obige Inhalt implementiert lediglich den Popup-Schicht-Effekt, aber indem mehr Code hinzugefügt wird, können komplexere Funktionen auf dieser Grundlage implementiert werden.
Das obige einfache Beispiel für die Verwendung von JavaScript, um Popup-Schicht-Effekt zu erzielen, ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.