Cómo cerrar la mesa de luz como padre

los diseñadores de sitios captar la atención de los internautas, mostrando Mesas de luz en las páginas Web. Si usted ha visto una imagen pop-up a través de una página Web que se oscurece, lo que has visto una caja de luz. Una forma de crear una caja de luz consiste en colocar el contenido de su caja de luz dentro de una ventana emergente. Esta ventana se convierte en un hijo de la página Web primario. Con un poco de JavaScript, puede dar a los usuarios la posibilidad de cerrar una ventana de selección haciendo clic en un botón situado en la ventana padre.

Instrucciones

Crear la mesa de luz Documento

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

<Img src = "mi_imagen.jpg" />

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

2 Reemplazar "mi_imagen.jpg" con el nombre de una imagen en el disco duro o la URL de una imagen en la Web.

3 Guarde el documento, y recordar el nombre con el que lo guardó.

Mostrar la mesa de luz 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:

<Input type = "button" value = "Abrir la mesa de luz" onclick = "openLightbox ( 'closeButton', 'blackscreen', '200', '200')" />

<Div id = clase "closeButton" = "closeButton">
<Input type = "button" value = "Cerrar la mesa de luz" onclick = "closeLightbox ( 'closeButton', 'blackscreen')" />
</ Div>

<Div id = clase "blackscreen" = "blackSreen">
</ Div>

La primera línea de código añade un botón que llama a la "openLightbox" función de JavaScript. El div "closeButton" encierra un botón que llama a la función que se cierra la ventana de caja de luz. La última div crea el efecto pantalla en negro que cubre la ventana padre cuando la luz se abre.

5 Pegar el código CSS se muestra a continuación en la sección de cabecera del documento:

<Style type = "text / css">
.closeButton {z-index: 999; position: absolute; top: 0; izquierda: 0; display: none;}
.blackSreen {height: 100%; width: 100%; background-color: Negro;
z-index: 998; position: absolute; superior: 20; izquierda: 0; display: none;}
</ Style>

La clase .closeButton y las clases .blackScreen establecen las propiedades de los dos divs. El display: none valores de atributos los hacen invisibles al abrir la página. Los valores de índice z de 999 y 998 garantizan que los divs aparecen en los otros controles en la ventana padre.

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

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

anchura var = 250;
altura var = 300;

var superior = 200;
var izquierda = 100;

La primera declaración crea una variable llamada lightboxWindow. Esta variable contiene el nombre de la ventana que se abre caja de luz. Reemplazar "lightbox.html" con el nombre del documento HTML que guardó en la primera sección. Los valores de anchura y altura de determinar las dimensiones de las ventanas en píxeles. Cambiar esas dimensiones si te gusta hacer que la ventana caja de luz grande o más pequeño. Los valores superior e izquierdo fijan la posición de la caja de luz cuando aparece sobre la ventana padre. Cambiar estos valores si es necesario. El valor de la parte superior se refiere a la distancia a la caja de luz desde la parte superior de la pantalla. El valor de la izquierda se refiere a la distancia a la caja de luz desde el borde izquierdo de la pantalla.

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

openLightbox función () {

windowProperties var = " '" + "width =" + ancho +
"Height =" + alto +
", La barra de herramientas = 0, el estado = 0, barra de menú = 0, resiable = 0, barras de desplazamiento = 0" +
", A la izquierda =" + izquierda + ", top =" + top +
" '";

document.getElementById ( "closeButton") style.display = "bloque".;
document.getElementById ( "blackscreen") style.display = "bloque".;

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

Esta función crea la ventana de luz y la abre. La variable windowProperties tiene las propiedades que definen la ventana. Las declaraciones document.getElementById hacen girar la ventana padre negro y aparece el botón "Cerrar la mesa de luz". Esas dos declaraciones hacen referencia a los valores de ID de los divs "closeButton" y "blackscreen" definidos en la sección del cuerpo. La declaración final se abre la ventana de caja de luz.

8 Pegar el código se muestra a continuación después de que el 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 la mesa de luz". La función restaura el color de la ventana padre a la normalidad y se esconde en el botón "Cerrar la mesa de luz". Luego se cierra la ventana de caja de luz.

9 Guarde el documento y abrirlo en su navegador. Haga clic en el botón "Mostrar la mesa de luz" para ver la caja de luz, y haga clic en el botón "Cerrar la mesa de luz" para cerrarla.

Consejos y advertencias

• Añadir todo lo que gusta al documento HTML que crea la caja de luz. En este ejemplo se utiliza una imagen. También podría mostrar un mapa, la forma o el otro artículo.
• Si los usuarios desactivar las ventanas emergentes en su navegador o desactivar JavaScript, ventanas pop-up no se abre.