Einfache transparente Vollbildmaske (lightBox)

Autor：Eve Cole Aktualisierungszeit：2010-06-09 17:08:28

Vor nicht allzu langer Zeit schickte mir ein Internetnutzer, der gerade seinen Abschluss machte, eine E-Mail, in der sein Abschlussprojekt einen Sperrbildschirmeffekt erzielen musste, aber er konnte den Quellcode des zuvor geposteten Dialogfelds nicht verstehen Ich sagte, ich würde ihn in zwei Tagen veröffentlichen. Da ich in letzter Zeit sehr beschäftigt war, fällt es mir erst jetzt ein und ich hoffe, dass es nicht zu spät ist, diesen Artikel zu schreiben.

Um es auf den Punkt zu bringen:

Heutzutage werden halbtransparente Maskenebenen im Vollbildmodus häufig auf Web2.0-Websites verwendet. Die meisten Masken werden implementiert, indem die Seitengröße berechnet und dann mit einer Ebene in der gleichen Größe wie die Seite abgedeckt wird, z. B. Tencent Qzone und WordPress Backend . Diese Methode ist verständlich, schlägt jedoch unter IE8 fehl (die Erklärung aus ausländischen Informationen ist, dass sie mit der Grafikkarte des Geräts zusammenhängt, nachdem sie auf dieses Problem gestoßen sind). , sie sogar ich möchte, dass IE8 gezwungen wird, die Methode von IE7 zu verwenden, um seine Werke zu analysieren. Eigentlich haben wir einen besseren Weg, lassen Sie uns CSS verwenden, um es zu lösen!

Erinnern Sie sich an „ position:fixed “? Es handelt sich um ein neues Attribut von CSS2. Es kann dazu führen, dass ein Element beim Ziehen der Bildlaufleiste stillsteht und sich nicht bewegt. Auf diese Weise wird beispielsweise die feste Navigationsleiste oben in Qzone implementiert. In ähnlicher Weise können wir auch eine Ebene mit 100 % Höhe und Breite verwenden, um das Browser-Ansichtsfenster abzudecken, sodass eine Vollbildmaskierung erreicht werden kann. Es ist nicht erforderlich, die Größe der Seite zu berechnen und keine dynamische Änderung vorzunehmen die Größe bei der Größenänderung des Browsers.

Es gibt jedoch Probleme. IE6 unterstützt „Position: behoben“ nicht. Wir können den TOP-Wert nur dynamisch ändern, um die statische Positionierung zu simulieren. Beim Ziehen der Bildlaufleiste wackelt die Maske definitiv -Wieder rendern. Aber Microsoft hat uns eine sehr interessante Funktion zur Verfügung gestellt. Wenn Sie ein statisch positioniertes Hintergrundbild für das HTML- oder Body-Tag festlegen, wackelt die Ebene nicht, wenn die Bildlaufleiste gezogen wird, wodurch „position:fixed“ nahezu perfekt simuliert wird. In tatsächlichen Projekten habe ich festgestellt, dass diese Funktion auch andere Sonderfunktionen auslösen kann, die ich später erläutern werde.

Um Ärger zu vermeiden, verwenden wir den bösen Ausdruck, um einige Skripte in CSS für IE6 zu schreiben, und positionieren unsere Maskenebene neu, wenn wir die Bildlaufleiste ziehen. Der Legende nach ist der Ausdruck sehr leistungsintensiv, unser Ausdruck weist jedoch nahezu keine Verluste auf. Interessierte Schüler können sich eingehend mit dem Ausdruck befassen.

Okay, nachdem unsere Sperrbildschirmmaske mit der großen Puppe IE6 kompatibel war, wurde sie von Mainstream-Browsern übernommen. Studenten, die js zum Schreiben von Effekten verwenden, sind jedoch immer sehr frustriert und möchten immer etwas hineinwerfen, also werden wir eine hinzufügen kleines Skript, um Benutzervorgänge zu unterbrechen, wenn der Bildschirm gesperrt ist, die Bildlaufleiste, das Rad, die Tabulatortaste zu deaktivieren, alles auszuwählen, zu aktualisieren und mit der rechten Maustaste zu klicken, um einen echten „Sperrbildschirm“ zu simulieren:

Codefeld ausführen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" /> <title>Seite sperren</ title> <meta name="author" content="www.planeart.cn" /> #pageOverlay { sichtbarkeit:versteckt; z-index:1987; 100 %; height:100 %; filter:alpha(opacity=70); } /*IE6 behoben*/ * html body { margin :0; height:100%; } * html #pageOverlay { position: absolute; left: expression(documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.clientHeight - this.offsetHeight ); } </style> <script> (function(){ // Holen Sie sich das Objekt var $ = function (id){ return document.getElementById(id); }; // Traverse var Each = function(a, b) { for (var i = 0, len = a.length; i < len; i++) b(a[i], i }; // Ereignisbindung var bind = function (obj, type, fn) { if ( obj.attachEvent) { obj['e' + type + fn] = fn; obj[type + fn] = function(){obj['e' + type + fn](window.event);} obj.attachEvent( 'on' + type, obj[type + fn]); else { obj.addEventListener(type, fn, false }; // Event entfernen var unbind = function (obj, type, fn) { if ( obj.detachEvent) { try { obj.detachEvent('on' + type, obj[type + fn]); obj[type + fn] = null; , fn, false); }; // Standardverhalten des Browsers verhindern var stopDefault = function(e){ e.preventDefault() : e.returnValue = false; Position var getPage = function(){ var dd = document.documentElement, db = document.body; return { left: Math.max(dd.scrollLeft, db.scrollLeft), top: Math.max(dd.scrollTop, db. scrollTop) }; }; // Bildschirm sperren var lock = { show: function(){ $('pageOverlay').style.visibility = 'visible'; p.top; // Einschränkungen bei der Seitenmausbedienung this.mouse = function(evt){ var e = evt || 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { bind(document, o, lock.mouse }); // Blockspezifische Tasten: F5, Strg + R, Strg + A, Tab, Up, Down this.key = function(evt){ var e = evt ||. window.event, key = e.keyCode; if((key == 116) || (e.ctrlKey && key == 82) ||. (e.ctrlKey && key == 65) ||. (key == 38) || (key == 40)) { try{ }catch(_ ){}; stopDefault(e); bind(document, 'keydown', lock.key }, close: function(){ $('pageOverlay'). (['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { unbind(document, o, lock.mouse); }); key); } }; bind(window, 'load', function(){ $('btn_lock').onclick = function(){ lock.show(); }; $('pageOverlay').onclick = function( ){ lock.close(); }); </script> </head> <body> <button id="btn_lock" style="position: absolute; left:50%; top: 40 %; ">Sperrbildschirm aktivieren</button> <ol id="test"> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> li> <li>囧</li> </ol> <div id="pageOverlay"></div> </body> </html>
[Strg+A Alle Tipps auswählen: Sie können zuerst einen Teil des Codes ändern und dann Ausführen drücken]

Originaltext: http://www.planeart.cn/?p=792