ubiquitour.com

Cómo cerrar Lightbox como padre de familia

Diseñadores del sitio captar la atención de los internautas mostrando Cajas lumínicas en páginas Web. Si has visto una imagen pop-up sobre un Web page que oscurece, probablemente has visto una caja de luz. Una manera de crear una caja de luz es colocar el contenido de la caja de luz dentro de una ventana emergente. Esta ventana se convierte en un niño de la página de Web principal. Utiliza un pequeño JavaScript, puedes dar a los usuarios la habilidad de cerrar una ventana lightbox pulsando un botón situado en la ventana principal.

Instrucciones

Crear documento de Lightbox

1 Crear un nuevo documento HTML y agregue el código siguiente a la sección del cuerpo del documento:

< img src="My_Image.jpg" / >

Este código crea una imagen que aparecerá en la ventana de la caja de luz.

2 Reemplace "My_Image.jpg" con el nombre de una imagen en tu disco duro o la URL de una imagen en la Web.

3 Guardar el documento y recuerde el nombre bajo el cual lo guardó.

Mostrar Lightbox ventana

4 Cierre el documento y crear un nuevo documento HTML. Agregue el código que se muestra a continuación a la sección del cuerpo del documento:

< tipo de entrada = "button" value = "Abrir Lightbox" onclick = "openLightbox ('closeButton', 'blackScreen', '200', 200')" / >

< div id = "closeButton" class = "closeButton" >< tipo de entrada = "button" value = "Cerrar Lightbox" onclick = "closeLightbox ('closeButton', 'blackScreen')" / >< / div >

< div id = "blackScreen" class = "blackSreen" >< / div >

La primera línea de código agrega un botón que llama a la función JavaScript "openLightbox". El div "closeButton" incluye un botón que llama a la función que cierra la ventana lightbox. El div final crea el efecto de la pantalla en negro que cubre la ventana principal cuando se abre la caja de luz.

5 Pegue el código CSS que se muestra a continuación en la sección head del documento:

< estilo tipo = "text/css" >.closeButton {z-índice: 999; posición: absolute; top: 0; izquierda: 0; Mostrar: none;}.blackSreen {width: 100%, altura: 100%; fondo-color: negro;z-index: 998; posición: absoluto; parte superior: 20; izquierda: 0; Mostrar: none;}< / estilo >

La clase .closeButton y las clases de .blackScreen establecerán las propiedades de los dos divs. La pantalla: ninguno atributo valores los hacen invisible cuando se abre la página. Los valores de z-index de 999 y 998 aseguran de que el div aparece sobre los demás controles en la ventana principal.

6 Agregue el código que se muestra a continuación a la sección de escritura del documento:

var lightboxWindow;var lightboxURL = "lightbox.html";

var ancho = 250;var altura = 300;

var alto = 200;var izquierda = 100;

La primera declaración crea una variable denominada lightboxWindow. Esta variable contiene el nombre de la ventana de caja de luz que se abre. Reemplace "lightbox.html" con el nombre del documento HTML guardado en la primera sección. Los valores de width y height establecen las dimensiones de ventanas en píxeles. Cambiar esas dimensiones si quieres hacer que la ventana de la caja de luz más grande o más pequeño. Los valores superiores e izquierdos ajuste posición de la caja de luz cuando aparece sobre la ventana principal. Cambiar estos valores si es necesario. El valor de la parte superior se refiere a distancia de la caja de luz de la parte superior de la pantalla. El valor de la izquierda se refiere a distancia de la caja de luz del borde izquierdo de la pantalla.

7 Agregue la siguiente función JavaScript a continuación el código que aparece en el paso anterior:

función openLightbox() {}

var windowProperties = "'" + "ancho =" + ancho +", altura =" + altura +", toolbar = 0, status = 0, menubar = 0, resiable = 0, scrollbars = 0" +", izquierda =" + izquierdo + ", top =" + parte superior +"'";

document.getElementById("closeButton").style.display = "block";document.getElementById("blackScreen").style.display = "block";

lightboxWindow = window.open (lightboxURL, 'lightbox', windowProperties);}

Esta función crea la ventana lightbox y lo abre. La variable windowProperties contiene las propiedades que definen la ventana. Las declaraciones de document.getElementById hacen el padre ventana negro y el botón de "Cerrar Lightbox" aparecen. Estas dos declaraciones de referencia los valores id de los divs "closeButton" y "blackScreen" definidos en la sección del cuerpo. La declaración final abre la ventana lightbox.

8 Pegue el código que se muestra a continuación después del código que se muestra en el último paso:

función closeLightbox (closeButton, blackScreen) {}

document.getElementById (closeButton).style.display = 'none';document.getElementById (blackScreen).style.display = 'none';parent.lightboxWindow.close();}

Esta función se ejecuta cuando un usuario hace clic en el botón "Cerrar caja de luz". La función restaura el color de la ventana padre a la normalidad y esconde el botón de "Cerrar Lightbox". Luego se cierra la ventana lightbox.

9 Guardar el documento y abra en su navegador. Haga clic en el botón "Ver álbum" para ver la caja de luz y haga clic en el botón "Cerrar Lightbox" para cerrarla.

Consejos y advertencias

  • Cualquier cosa que quieras añadir al documento HTML que crea la caja de luz. Este ejemplo utiliza una imagen. También podría mostrar un mapa, formulario o cualquier otro elemento.
  • Si los usuarios desactivar ventanas emergentes en su navegador o desactivar JavaScript, ventanas emergentes no se abrirán.