Ideen:
• Erstellen Sie eine Maske und stellen Sie die Stapelreihenfolge der Maske fest, um sicherzustellen, dass andere Elemente abgedeckt werden können
Position: Absolut; oben: 0; links: 0; Anzeige: Keine; Hintergrundfarbe: RGBA (9, 9, 9, 0,63); Breite: 100%; Höhe: 100%; Z-Index: 1000; • Stellen Sie das Hintergrundfarbe und das Anzeigeformat des Inhalts in der Maskenbreite: 50%; Text-Align: Mitte; Hintergrund: #ffffff; Border-Radius: 6px; Rand: 100px Auto; Zeilenhöhe: 30px; Z-Index: 10001; • Bindungsereignis, wechseln Sie dynamisch die Anzeige -Attributfunktion ShowModel () der Maske {document.getElementById ('myModel').Hinweis: Die Maske sollte absolut positioniert sein, die Breite und Höhe sollte die gesamte Seite einnehmen, und die Stapelauftrag sollte groß sein.
Quellcode
<! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> Maske </title> <style> .Container {Breite: 900px; Rand: 50px Auto; RGBA (9, 9, 9, 0,63); Breite: 100%; Höhe: 100%; Z-Index: 1000; onclick="showModel()">Pop up mask</button><div id="myModel" onclick="closeModel()"><div><p>Hello, I'm the content~~</p><p><button id="closeModel" onclick="closeModel()">Close</button></p></div></div><script>function showModel() {document.getElementById ('myModel'). style.display = 'block';} function congemodel () {document.getElementById ('myModel').Das obige ist der einfache Implementierungscode der vom Editor vorgelegten JavaScript -Mask -Funktion (Modell). Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!