Cómo hacer que la mesa de luz aparecen arriba Otros artículos

Una caja de luz es un plugin de jQuery utiliza para superponer imágenes o galerías en una página web, y también se conoce como una ventana modal. scripts de la mesa de luz hechas pre-típicamente incluyen una hoja de estilo que define cómo aparecerá la caja de luz. Por defecto, la caja de luz está programado para aparecer por encima de todos los demás contenidos en una página web, pero en algunos casos, un elemento puede negarse a cooperar. Este es un problema común con elementos flash o deslizadores de imagen. El orden en que los elementos están en capas se controla a través de la "z-index" propiedad en la hoja de estilo CSS.

Instrucciones

1 Asegúrese de que el plug-in caja de luz que ha elegido se ha instalado correctamente. Un enlace a la hoja de estilo debe estar presente en la cabecera de la página y ser algo como esto:

<Link rel = "stylesheet" type = "text / css" href = media = "pantalla" "css / jquery.lightbox-0.4.css" />

2 Abra la hoja de estilo que contiene los estilos de caja de luz. Localizar el selector principal que controla la ventana de luz y la superposición de fondo. En el caso del original plugin de jQuery caja de luz, los selectores son llamados "# jquery-superposición" y "# jquery-caja de luz." Una propiedad "z-index" debe existir en ambas declaraciones. Por ejemplo, la ventana de jQuery caja de luz se establece en un valor de "100":

jquery-caja de luz {

position: absolute;

top: 0;

izquierda: 0;

width: 100%;

z-index: 100;

text-align: center;

line-height: 0;

}

3 Cambiar el "z-index" valor a "8999" para la superposición y "9999" de la ventana. Estos números inusualmente altos deben garantizar la caja de luz se coloca por encima de todos los demás elementos.

4 Utilizar Opera o instalar el Firebug para Firefox desde el add-on directorio oficial. Haga clic en el elemento de superposición, y luego seleccione "Inspeccionar elemento". Aparecerá una ventana que muestra el estilo de código HTML y CSS perteneciente al elemento para ayudarle a determinar qué archivo de los estilos están en, así como qué clase se utiliza para controlar el elemento. Si está trabajando con un plugin de WordPress o tema CMS que incluye una caja de luz, la luz de CSS puede ser incluido como parte del CSS del tema.

5 Descargar y abrir el archivo que contiene el estilo CSS del elemento problema. Si este elemento es parte de un plugin o tema que no desea modificar directamente, es posible duplicar el estilo en el estilo de la ficha de su sitio web. Cambiar el "z-index" propiedad a un número inferior al de 9998, y añade "! Important" a la línea de decirle al navegador para dar a esta declaración de prioridad. Por ejemplo:

.adbox {

z-index: 500 importante;

}

Consejos y advertencias

• Sustituir los elementos flash, como controles deslizantes y los bloques de anuncios, con jQuery HTML5 o contrapartes para evitar la superposición o comportamiento extraño. Utilizando el mismo tipo de secuencia de comandos para todos sus elementos interactivos también garantiza una mejor compatibilidad y facilidad de uso.
• Siempre use plugins jQuery con la misma versión dependencia o ninguna dependencia con el fin de evitar conflictos.