Máscara transparente simple de pantalla completa (lightBox)

Autor：Eve Cole Fecha de actualización：2010-06-09 17:08:28

No hace mucho, un internauta que estaba a punto de graduarse me envió un correo electrónico. Su proyecto de graduación necesitaba lograr un efecto de pantalla de bloqueo, pero no podía entender el código fuente del cuadro de diálogo que publiqué antes. Me preguntó si podía explicarlo. Código relacionado con la pantalla de bloqueo. Dije que lo publicaría en dos días. Como he estado muy ocupado recientemente, lo recuerdo ahora y espero que no sea demasiado tarde para escribir este artículo.

Yendo al grano:

Hoy en día, las capas de máscara semitransparentes de pantalla completa se utilizan ampliamente en los sitios web web2.0. La mayoría de las máscaras se implementan calculando el tamaño de la página y luego cubriéndola con una capa del mismo tamaño que la página, como Tencent qzone y el backend de wordpress. . Este método es comprensible, pero fallará en IE8 cuando la página sea muy larga (la explicación de información extranjera es que está relacionada con la tarjeta gráfica de la máquina). Algunos estudiantes con gráficos perfectos se rascaron la cabeza después de encontrar este problema. Incluso quieren que IE8 se vea obligado a utilizar el método de IE7 para analizar sus trabajos. En realidad tenemos una manera mejor, ¡usemos CSS para resolverla!

¿Recuerdas " posición: fija "? Es un nuevo atributo de CSS2. Puede hacer que un elemento permanezca quieto en la página y no se mueva al arrastrar la barra de desplazamiento. Por ejemplo, la barra de navegación fija en la parte superior de Qzone se implementa de esta manera. De manera similar, también podemos usar una capa con 100% de alto y ancho para cubrir la ventana gráfica del navegador, de modo que se pueda lograr el enmascaramiento de pantalla completa. No es necesario calcular el tamaño de la página y no es necesario modificarla dinámicamente. el tamaño al cambiar el tamaño del navegador.

Pero hay un dolor de cabeza. -renderizar de nuevo. Pero Microsoft nos ha proporcionado una característica muy interesante. Si configura una imagen de fondo colocada estáticamente para la etiqueta html o del cuerpo, la capa no temblará cuando se arrastre la barra de desplazamiento, simulando casi perfectamente la "posición: fija". En proyectos reales, descubrí que esta característica también puede activar otras funciones especiales, que explicaré más adelante.

Para evitar problemas, usamos la expresión malvada para escribir algunos scripts en CSS para IE6 y reposicionar nuestra capa de máscara al arrastrar la barra de desplazamiento. Dice la leyenda que la expresión requiere mucho rendimiento, pero nuestra expresión casi no tiene pérdida. Los estudiantes interesados pueden estudiar la expresión en profundidad.

Bien, después de ser compatible con el muñeco cabezón IE6, nuestra máscara de pantalla de bloqueo ha sido adoptada por los navegadores convencionales. Sin embargo, los estudiantes que usan js para escribir efectos siempre están muy frustrados y siempre quieren agregar algo, así que agregaremos un. pequeño script para interrumpir las operaciones del usuario cuando la pantalla está bloqueada, deshabilitar la barra de desplazamiento, la rueda, la tecla de tabulación, seleccionar todo, actualizar y hacer clic derecho para simular una 'pantalla de bloqueo' real:

Ejecutar cuadro de código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//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; charset=utf-8" /> <title>bloquear página</ título> <meta nombre="autor" contenido="www.planeart.cn" /> <estilo> #pageOverlay { visibilidad: oculto; posición: superior: 0; índice z: 1987; 100%; altura:100%; fondo:#000; filtro:alfa(opacidad=70); } /*IE6 fijo*/ * html { fondo:url(*) fijo; :0; altura: 100%; } * html #pageOverlay { posición: absoluta; izquierda: expresión (documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); ); } </style> <script> (function(){ // Obtener el objeto var $ = function (id){ return document.getElementById(id); }; // Recorrer var each = function(a, b) { for (var i = 0, len = a.length; i < len; i++) b(a[i], i } // Enlace de evento var bind = función (obj, tipo, fn) { if ( obj.attachEvent) { obj['e' + tipo + fn] = fn; obj[tipo + fn] = función(){obj['e' + tipo + fn](ventana.event);} obj.attachEvent( 'on' + tipo, obj[tipo + fn]); else { obj.addEventListener(tipo, fn, falso } // Eliminar evento var unbind = función (obj, tipo, fn) { if ( obj.detachEvent) { intentar { obj.detachEvent('on' + tipo, obj[tipo + fn]); obj[tipo + fn] = nulo } catch(_) {}; , fn, false); }; }; // Evitar el comportamiento predeterminado del navegador var stopDefault = function(e){ e.preventDefault ? e.preventDefault() : e.returnValue = false }; Posición var getPage = function(){ var dd = document.documentElement, db = document.body; return { izquierda: Math.max(dd.scrollLeft, db.scrollLeft), arriba: Math.max(dd.scrollTop, db. scrollTop) }; }; // Bloquear pantalla var lock = { show: function(){ $('pageOverlay').style.visibility = 'visible'; p.top; // Restricciones de operación del mouse de página this.mouse = function(evt){ var e = evt || stopDefault(e); scroll(left, top }; 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { bind(document, o, lock.mouse }); // Bloquear teclas específicas: F5, Ctrl + R, Ctrl + A, Tabulador, arriba, abajo this.key = function(evt){ var e = evt || window.event, key = e.keyCode if((key == 116) || (e.ctrlKey && key == 82) || (e.ctrlKey && clave == 65) || (clave == 9) || (clave == 38) || (clave == 40)) { intentar{ e.keyCode = }catch(_ ){}; stopDefault(e); }; bind(documento, 'keydown', lock.key); (['DOMMouseScroll', 'rueda del mouse', 'desplazamiento', 'menú contextual'], función(o, i) { desvincular(documento, o, lock.mouse); }); desvincular(documento, 'keydown', bloquear. clave); } }; bind(ventana, 'cargar', función(){ $('btn_lock').onclick = función(){ lock.show(); }; $('pageOverlay').onclick = función( ){ lock.close(); } } })(); </script> </head> <body> <button id="btn_lock" style="posición: absoluta; izquierda: 50%; arriba: 40%; ">Habilitar pantalla de bloqueo</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>
[Ctrl+A Seleccionar todos los consejos: primero puede modificar parte del código y luego presionar Ejecutar]

Texto original: http://www.planeart.cn/?p=792