El desprendimiento del estilo y el comportamiento al implementar Lightbox reduce JS

Autor：Eve Cole Fecha de actualización：2025-05-23 13:00:04

[Los 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 en Lightbox, y reducir el trabajo de JS en todos los aspectos (oclusión de pantalla completa, IE6 Occlusion Select, centrado bidireccional, contenido altamente adaptativo, etc.).

Primero cargue el código :

Ejecutar el cuadro de código

<! Doctype html public -// w3c // dtd xhtml 1.0 xmlns = http: //www.w3.org/1999/xhtml> <lEd> <meta http-oquiv = content-type content = text/html; charset = utf-8/> <meta name = autor content = chomo/> <link rel = start href = http: //www.14px.com title = home/> <title> Bloqueo de pantalla completa, caja de luz centrada en automóviles </title> <style type = text/css>* {margen: 0; relleno: 0; } html, cuerpo {altura: 100%; desbordamiento: oculto; Font: 12px/1.5 SimSun;}. MyPage {Line-Hieight: 3; desbordamiento: auto; Ancho: 100%; Altura: 100%;}. Lightbox, .Popupcover, .popuppiframe, .popupComponent {posición: absoluto; Izquierda: 0; arriba: 0; Ancho: 100%; Altura: 100%;}. PopUpComponent {Z-Index: 2; visualización: ninguno;}. PopUppiframe {display: none; _display: bloque; _filter: alfa (opacidad = 0);}. PopUpCover {fondo:#000; Opacidad: 0.7; *Filtro: alfa (opacidad = 70);}. lightbox {text-align: center; Overflow: Auto;}. LightBoxContent {Display: Inline-Block; *Pantalla: en línea; Zoom: 1; Ancho: 300px; relleno: 10px; Antecedentes: #fff; borde: 5px Solid #00b4ff; vertical-align: middle;}. lightboxMaxHeight {display: inline-block; Align vertical: medio; Altura: 100%; *Altura: 99.5%; Ancho: 1px; desbordamiento: oculto; margen-izquierda: -1px;}. lightboxwrapper {display: inline-block; *Pantalla: en línea; Zoom: 1; text-align: left;}. lightboxClose {color:#f00;}. lightboxsubmit {margin-top: 10px; Top-top: 5px; border-top: 1px solid #ccc;}. lightboxsubmit entrada {font-size: 12px; relleno: 0 10px; desbordamiento: visible; margen: 0 5px;} </style> </head> <body> <div class = popupComponent id = lightbox> <iframe class = popupComponent id = lightbox> <iframe class = popupCover> </div> <divse class = lightbox> <span class = lightboxMaxHeight> </span> <Div class = LightBoxCont> <Div Class = LightBox de LightBox> <span = LightBoxMaxHeight> </span> <Div Class = LightBoxCont> <Div Class = LightBox> línea, el texto está centrado <br/> </div> <div class = lightboxSubMit> <input type = button value = determinar onClick = hidelayer ('lightbox')/> <input type = button value = Cancel OnClick = Hidelayer ('Lightbox')/> </div> </div> </div> <divs class = PopupComponent Id = LightBox2> <ifrAn class = PopUpFrame> </iframe> <div class = popupcover> </div> <div class = lightbox> <div class = lightboxContent> <div class = lightboxwrapper> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de la altura de la altura de la altura de la altura de la altura de la altura de la altura de la altura de la altura de la altura. excedió la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de la altura de la altura de la altura de la altura de la altura de la altura de la altura de la altura de la altura. El contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. /> Cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una vez que el contenido ha excedido la pantalla de la altura de una pantalla de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una vez que el contenido ha excedido la pantalla de la altura de una pantalla de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de la altura de la altura de la altura de la altura de la altura de la altura de la altura de la altura. excedió la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br /> cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla cuando el contenido ha excedido la altura de una pantalla. <Br/> </div> <div class = lightboxSubMit> <input type = button value = determinar onClick = Hidelayer ('lightbox2')/> <input type = Botton value = Cancel OnClick = Hidelayer ('Lightbox2')/> </iv> </div> <span Class = LightBoxMaxHeight> </span> </div> Div Class content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br /><div style=text-align:center;><input type=button value=button button onclick=showlayer('lightbox') /></div>Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br /> Fingir contenido rico <br /> Fingir contenido rico <br /> Fingencia de contenido rico <br /> Contenido rico <Br /> Fingencia de contenido rico <Br /> Fingencia de contenido rico <br /> <div style = text-align: center;> <input type = button value = botón valor = botón de botón Botón = showlayer ('Lightbox') /> </iv> Contento de pretensión de contenido de pretendiendo rico. /> Fingir contenido rico <Br /> Fingir contenido rico <br /> Fingencia de contenido rico <br /> Fingencia de contenido rico <Br /> Contenido rico <Br /> Fingencia de contenido rico <Br /> Fingiendo contenido rico <Br /> /> <Eectar> <Cection> una selección para probar si IE6 puede cubrirlo < /opción> </select> <Br /> pretendiendo ser rico en contenido <Br /> Pretended para ser rico en Rich en Rich. El contenido <Br /> fingió ser rico en contenido <Br /> fingió ser rico en contenido <Br /> fingido ser rico en contenido <Br /> fingido como rico en contenido <Br /> fingido como rico en contenido <Br /> fingido que se pretendía rico en contenido <Br /> pretendía ser rico en contenido <Br />. /><select><option>Another select for testing whether ie6 can cover it</option></select><br />Pretended to be rich in content<br />Pretended to be rich in content<br /><div style=text-align:center;><input type=button value=button onclick=showlayer('lightbox') /><input type=button value=When the content has exceeded the height of one screen onClick = showlayer ('lightbox2') /> </div> finge ser rico en contenido <Br /> fingir ser rico en contenido <Br /> Fingir fingir en rico en contenido <Br /> pretender ser rico en contenido <Br /> pretender ser rico en contenido <Br /> Finición de ser rico en contenido <Br /> pretender ser rico en contenido <Br /> pretender ser rico en contenido <Br /> /> Fingir ser rico en contenido <Br /> pretender ser rico en contenido <Br /> Fingir ser rico en contenido <Br /> Fingir ser rico en contenido <Br /> Fingir ser rico en contenido <Br /> Fingir fingir que es rico en contenido <Br /> pretender ser rico en contenido <Br /> pretender ser rico en contenido <Br /> pretender ser rico en contenido <Br /br /> BR /BR /BR /BR /BRY AL El contenido <Br /> finge ser rico en contenido <Br /> fingir ser rico en contenido <Br /> pretender ser rico en contenido <Br /> Fingir que se rica en contenido <Br /> Fingir rico en contenido <Br /> pretender fingir que es 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 en contenido en contenido en rico en contenido en contenido en rico en rico en rico en rico en rico en rico en rico en rico en rico en rico en rico en contenido en rico en contenido en contenido en contenido en rico en contenido Sea rico en contenido <Br /> Finge ser rico en contenido <Br /> Finge ser rico en contenido <Br /> Fingir ser rico en contenido <Br /> Fingir ser rico en contenido <Br /> Finge ser rico en contenido <Br /> Finición de ser rico /> < /div> <scripty showlayer (id) {document.getEmementByid (id) .style.dyle.dysplay;}; ID de function (id) {document.getElementById (id) .style.display = none;} </script> </body> </html>

[CTRL+A TODOS SELECCIÓN SELECCIÓN: puede modificar primero algún código y luego presione Ejecutar]

Esta caja de luz tiene las siguientes funciones, puede probarlo modificando el código ^- ^:

Al hacer clic en cualquier posición en la página, puede cubrir perfectamente la pantalla (en este momento, cualquier elemento, incluida la barra de desplazamiento, no se puede controlar directamente). El elemento Seleccionar se puede bloquear sin esconderse en IE6 (el defecto del método de oclusión de iframe: después del bloqueo, si la barra de desplazamiento se arrastra, la selección aún se moverá al nivel superior).
Lightbox es altamente adaptable a su contenido y presenta un estado de centrado perfecto.
Cuando el contenido es una sola línea, se muestra en el centro; Cuando el contenido es de múltiples líneas, se muestra a la izquierda; Cuando la altura del contenido hace que la caja de luz exceda la altura de la pantalla, parece barras de desplazamiento y se muestra en la parte superior, para que los lectores puedan leer en la imagen completa.

Si está interesado, los siguientes consejos para formar esta caja de luz están disponibles para que se consulte:

1. Métodos para sombreado de pantalla completa:

a. Ocultar la barra de desplazamiento de HTML/cuerpo.

b. Use un DIV como máscara y luego use un DIV como página con barras de desplazamiento, una apilada en la parte superior y otra apilada en la parte inferior.

Ejecutar el cuadro de código

[CTRL+A TODOS SELECCIÓN SELECCIÓN: puede modificar primero algún código y luego presione Ejecutar]