LightBox de pantalla completa blindado y centrado automáticamente

Autor：Eve Cole Fecha de actualización：2009-07-27 17:14:47

[Navegadores que participan en la prueba: IE6/IE7/IE8/FF3.5/OP9.6/SF4/Chrome2]
[Sistema operativo: Windows]

Este tutorial tiene como objetivo separar el estilo y el comportamiento de lightBox y reducir el trabajo de JS en varios aspectos (enmascaramiento de pantalla completa, selección de enmascaramiento en ie6, centrado bidireccional, contenido adaptable en altura, etc.).

Primero el 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 ">
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8" />
<meta nombre="autor" contenido="Chomo" />
<enlace rel="inicio" href=" http://www.14px.com " título="Inicio" />
<title>Blindaje de pantalla completa, lightBox de centrado automático</title>
<tipo de estilo="texto/css">
* { margen:0; relleno:0;
html,cuerpo {altura:100%; desbordamiento:oculto; fuente:12px/1.5 simsun;}
.myPage {altura de línea:3; desbordamiento:auto; ancho:100%;
.caja de luz,
.popupCubierta,
.popupIframe,
.popupComponent { posición:absoluta; izquierda:0; ancho:100%;
.popupComponent { índice z:2; mostrar:ninguno;}
.popupIframe { mostrar:ninguno; _display:bloque; _filter:alpha(opacidad=0);}
.popupCover { fondo:#000; opacidad:0.7; *filtro:alfa(opacidad=70);}
.lightBox { text-align:centro; desbordamiento:auto;}
.lightBoxContent { display:inline-block; *display:inline; zoom:1; ancho:10px;#fff;
.lightBoxMaxHeight { display:inline-block; vertical-align:middle; margen izquierdo:-1px;}
.lightBoxWrapper { display:inline-block; *display:inline; zoom:1;
.lightBoxClose {color:#f00;}
.lightBoxSubmit { margen-top:10px; padding-top:5px; borde-top:1px sólido #ccc;}
.lightBoxSubmit entrada {tamaño de fuente:12px; relleno:0 10px; desbordamiento:visible margen:0 5px;}
</estilo>
</cabeza>
<cuerpo>
<div class="popupComponent" id="lightBox">
<iframe clase="popupIframe"></iframe>
<div class="popupCover"></div>
<div clase="caja de luz">
<span class="lightBoxMaxHeight"></span>
<div class="lightBoxContent">
<div class="lightBoxWrapper">
El texto está centrado cuando el mensaje tiene menos de una línea<br />
</div>
<div class="lightBoxSubmit">
<tipo de entrada="botón" valor="OK" onclick="hideLayer('lightBox')" />
<tipo de entrada="botón" valor="Cancelar" onclick="hideLayer('lightBox')" />
</div>
</div>
</div>
</div>
<div class="popupComponent" id="lightBox2">
<iframe clase="popupIframe"></iframe>
<div class="popupCover"></div>
<div clase="caja de luz">
<div class="lightBoxContent">
<div class="lightBoxWrapper">
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
Cuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantallaCuando el contenido ha superado la altura de una pantalla<br />
</div>
<div class="lightBoxSubmit">
<tipo de entrada="botón" valor="OK" onclick="hideLayer('lightBox2')" />
<tipo de entrada="botón" valor="Cancelar" onclick="hideLayer('lightBox2')" />
</div>
</div>
<span class="lightBoxMaxHeight"></span>
</div>
</div>
<div class="miPágina">
Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />
<div style="text-align:center;"><input type="button" value="Botón en la primera pantalla" onclick="showLayer('lightBox')" /></div>
Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />
<select><option>Una selección utilizada para probar si se puede cubrir en IE6</option></select><br />
Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />
Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />
Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />
<select><option>Otra selección para probar si se puede cubrir en IE6</option></select><br />
Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />
<div style="text-align:center;"><input type="button" value="Botón ubicado en la segunda pantalla" onclick="showLayer('lightBox')" /><input type="button" value ="Cuando el contenido ha excedido la altura de una pantalla" onclick="showLayer('lightBox2')" /></div>
Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />
Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />
Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />Pretender ser rico en contenido<br />
</div>
<guión>
función mostrarCapa(id) {
document.getElementById(id).style.display = "bloque";
}
función ocultarCapa(id) {
document.getElementById(id).style.display = "ninguno";
}
</script>
</cuerpo>
</html>

Este lightBox tiene las siguientes características, puedes probarlo modificando el código ^-^:

Hacer clic en cualquier lugar de la página puede proteger perfectamente la pantalla (cualquier elemento, incluida la barra de desplazamiento, no se puede controlar directamente en este momento, en IE6, el elemento seleccionado se puede proteger sin ocultarlo (el defecto del método de protección iframe: después del blindaje). Si arrastra la barra de desplazamiento y la selección seguirá moviéndose hacia la parte superior).
La altura del lightBox se adapta a su contenido y aparece perfectamente centrada.
Cuando el contenido es de una sola línea, se muestra en el centro; cuando el contenido tiene varias líneas, se muestra a la izquierda; cuando la altura del contenido es tal que el lightBox excede la altura de la pantalla, se muestra una barra de desplazamiento; y se muestra en la parte superior, para que los lectores puedan leerlo en su totalidad.

Si está interesado, los siguientes consejos que componen este lightBox están disponibles para su referencia:

1. Método de enmascaramiento de pantalla completa:

A. Oculte la barra de desplazamiento de html/body.
B. Use un div como máscara y luego use otro div para crear una página con barras de desplazamiento, una arriba y otra abajo.