CSS+JavaScript
Implementierungsprinzip:
Erstellen Sie ein Vollbild-DIV unter Verwendung der absoluten Positionierung, damit sie vom Dokumentstrom getrennt werden kann, ohne andere Elemente zu beeinflussen, und setzen Sie sie auf einen durchscheinenden Zustand. Natürlich kann diese Transparenz nach Belieben eingestellt werden und ein Anmeldeelement erstellen, das auch die absolute Positionierung verwendet und den Z-Index-Attributwert größer als der DIV auf dem Bildschirm macht, und wird zu diesem Zeitpunkt nicht von der Div-Bildschirm-DIV abgedeckt. Im Standardzustand ist der Anzeigeattributwert dieser beiden Divs keine. Beim Klicken auf die entsprechende Schaltfläche können sie ihren Anzeigeattributwert ändern.
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <meta name = "Autor" content = "// www.vevb.com/"/> <title> Wie man einen Full-Screen-Green-Black-Black-Mask-Effekt-Wulin.com </title> <style type adup-full-screen-grau-black "> * {{margin {title> up up up texte text/csS" Polsterung: 0px; } .zhezhao {width: 100%; Höhe: 100%; Hintergrundfarbe:#000; Filter: Alpha (Opazität = 50); -moz-opacity: 0,5; Deckkraft: 0,5; Position: absolut; links: 0px; Oben: 0px; Anzeige: Keine; Z-Index: 1000; } .login {width: 280px; Höhe: 180px; Position: absolut; Top: 200px; Links: 50%; Hintergrundfarbe:#000; Rand-Links: -140px; Anzeige: Keine; Z-Index: 1500; } .Content {Margin-Top: 50px; Farbe: Rot; Zeilenhöhe: 200px; Höhe: 200px; Text-Align: Mitte; } </style> <script type = "text/javaScript"> window.onload = function () {var zhezhao = document.getElementById ("zhezhao"); var login = document.getElementById ("Login"); var bt = document.getElementById ("bt"); var btclose = document.getElementById ("btclose"); bt.onclick = function () {zhezhao.style.display = "block"; login.style.display = "block"; } btclose.onclick = function () {zhezhao.style.display = "Keine"; login.style.display = "Keine"; } } </script> </head> <body> <div id="zhezhao"></div> <div id="login"><button id="btclose">Click to close</button></div> <div>Wulin.com welcomes you, <button id="bt">Click to pop up mask</button></div> </body> </html>Die obigen implementiert die Grundmaskenfunktion. Beim Klicken auf die Maske wird ein Objekt angezeigt. Beim Klicken zum Schließen verschwindet der Maskeneffekt.
Reines JavaScript:
Implementierungseffekt: Wenn ein Fenster auftaucht, wird die Seite hinter dem Fenster dunkel und kann nicht betrieben werden.
Schwierigkeitsgrad: Da die Div-Schicht die Auswahlsteuerung nicht abdecken kann, gibt es zwei spezielle Methoden: Eine besteht darin, einen Iframe unter dem Popup-Fenster hinzuzufügen, um die Auswahl abzudecken. Die zweite besteht darin, die Auswahl der Steuerung beim Popup auszublenden und die zweite Methode hier auszuwählen.
Implementierungsprinzip: Fügen Sie eine durchscheinende Ebene auf der Seite und in der Mitte des Popup-Fensters hinzu, um den Inhalt der Seite zu überschreiben.
Code:
<script Language = "javaScript"> Funktion open () {// Ausblenden Sie die Auswählen von SteuerdisplaysSelect (0); // Mask Layer -Dokument anzeigen. // Die Maskenschicht resizemask () trainieren; window.onResize = resizemask; // Pop-up-document.getElementById ("Divopenwin"). Style.display = "block"; } function close () {// show Control displaySelect (1); // Verarbeitungsmaskenschicht divpagemask.style.width = "0px"; Divpagemask.Style.Height = "0px"; divopenwin.style.display = "none"; window.onResize = null; document.getElementById ("divopenwin"). style.display = "Keine"; } // Page Mask Function Resizemask () {divpagemask.style.width = document.body.scrollwidth; Divpagemask.Style.Height = document.body.ScrollHeight; divopenwin.style.left = ((document.body.offsetwidth - divopenwin.offsetwidth) / 2); divopenwin.style.top = ((document.body.offseteight - divopenwin.offseteight) / 2); } function displaySelect (val) {// Die Auswählen von Steuervar -Anzeigentypen auswählen und ausblenden; var arrDispalytype = ["Hidden", "sichtbar"]; var arrobjselect = document.getElementsByTagName ("select"); für (i = 0; i <arrobjselect.length; i ++) {Arrobjselect [i] .style.visibility = arrDispalyType [val]; }} </script> <style type = "text/css"> .body, td {font-size: 12px} #divpagemask {Hintergrundfarbe: White; Filter: Alpha (Opazität = 50); links: 0px; Position: absolut; ober: 0px;} #divopenwin {Hintergrundfarbe: #eeeeee; Position: absolut; links: 0px; ober: 0px; Anzeige: Keine; Z-Index: 50; Breite: 300px; Höhe: 150px} </style> <div id = "divPagemask"> </div> <div id = "divopenwin"> <center> <a href = "JavaScript: close (); <td colspan = "2" align = "center"> <p> <img src = "http://www.sopul.com/images/index/logo.gif"> </p> <p> </p> <p> </p> </td> </tr> <tr> <tdds </p> </p> </td> </tr> <tr> <tdds style = "color:#666666; Schriftgröße: 13px"> </td> </tr> </tbody> </table> <table bgcolor = "#e1e1e1" cellpadding = "0" cellpacing = "1"> <tbody> <tr> <td align = "center" bgcolor = "#F9F9F9"> center = "center" bgcolor = "#f9f9f9"> center = "center" bgcolor = "#F9F9F9"#50 "#50"#50 "#50F9" cellpadding=0 width=600 style="margin-top:20px"> <FORM name="f" action="http://www.sopull.com/ShopList.asp"> <tbody> <ttr> <td>Keywords:</td> <td><input type="text" name="k" size=30 /></td> <td align=middle width=101>Location:</td> <td align=middle width=97 id="cn"><script language="javascript" src="http://www.sopull.com/Inc/Js/ListCity.asp?CityName=Beijing"></script></td> <td align=middle width=95><input name="s" type=submit value = "Search Shop"> </td> </tr> </form> <tr> <td> </td> <td colspan = "4" valign = "Middle"> Zum Beispiel: Restaurant; Geräte; Supermarkt </table> </td> </tr> </tbody> </table> </table> </table> </table> </center> <p align = "center"> </p> <p align = "center"> <a href = "javascript: open (); cellpadding="0" cellpacing="0"> <tbody> <!-- <tr> <td align="center" background="Images/Index/line_2.gif"><img src="Images/Index/line_2.gif"></td> </tr>--> <tr> <td align="center"><a href="#" target=_blank><font color = "#ff6600"> Shop Promotion </a> | <a href = "#"> über Shop </a> | <a class = b href = "#" target = _blank> Business Cooperation </a> | <a onclick = "this.style.behavior = 'url (#Standard#homepage)'; this.sethomepage ('http://www.sopull.com'); href = "http://www.sopull.com/#"> als Homepage festgelegt </a> | <a onclick = "JavaScript: window.external.addfavorit ('http://www.sopull.com/''Soupu.com-China der größte Suchmaschine')" href = "http://www.sopull.com/> add </a> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </ttr> </tr> </tr> </tr> </ttr> </ttr> </ttr> </ttr> </ttr> </ttr> </ttr> </TR> </TR> </TR>; Suppeu.com Guangdong ICP Nr. 07006767 </td> </tr> </tbody> </table>