CSS PopUp con jQuery
Nueva versión CSS PopUp jQuery y Ajax.
Hemos visto como hacer un PopUp con un iframe transparente utilizando thichbox, os voy a mostrar otro método sin utilizar un iframe, simplemente con capas y con la ayuda de jQuery.
Lo primero que necesitamos es una capa que ocupe toda la pantalla y que tenga una opacidad.
<div id="capaPopUp"></div>
Luego necesitamos la ventana del popup.
<div id="popUpDiv"> <div id="capaPng"> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales vulputate erat. Nulla facilisi. Sed porta velit. Sed nec mi. </div> <a href="javascript:void(0);" title="Cerrar" id="cerrar"><img src="wp-content/examples/jquery/css-popup/imagenes/icons/cerrar.gif" title="Cerrar" alt="Cerrar" /></a> </div> </div>
En nuestra hoja de estilos añadimos los siguientes estilos (Comento línea a línea para que sea fácil de entenderlo):
/**************************************************************************
ESTILOS PARA LA VENTANA POPUP 20090323@JCP
***************************************************************************/
#capaPopUp {
background-color:#000; /* Le damos la el color de la opacidad. */
opacity:0.65; /* Este valor mostrará la intensidad de la opacidad. */
position:absolute; /* La posición tendrá que ser absoluta. */
z-index:9001; /* Esta propidad es para añadir la capa superpuesta al nivel 9001. */
top:0; /* Para que posicione la capa al punto '0' del top de la página. */
left:0; /* Para que posicione la capa al punto '0' a la izquieda de la página. */
width:100%; /* El valor por defecto que tendrá que expandirse. */
height:100%; /* El valor por defecto que tendrá que expandirse. */
display:none; /* Por defecto estará desactiva */
}
#popUpDiv {
position:absolute; /* La posición tendrá que ser absoluta. */
z-index:9002; /* Esta propidad es para añadir la capa superpuesta al nivel 9002 (antes que la capa 'capaPopUp'). */
overflow:auto; /* Esta propiedad la indicamos por si el contenido es más grande que la capa que por defecto salga el 'scroll'. */
left:50%; /* Para posicionar horizontalmente la capa al centro de la página */
display:none; /* Por defecto estará desactiva */
top:50%; /* Para posicionar verticalmente la capa al centro de la página */
}
/**************************************************************************
ESTILOS PROPIOS DEL POPUP 20090323@JCP
***************************************************************************/
#capaContent {
display:block;
width:400px; /* Necesario para que el script centre la capa horizontalmente en la página */
height:200px; /* Necesario para que el script centre la capa verticalmente en la página */
background-color:#FFF;
}
Para que Internet Explorer haga la opacidad tendremos que insertar un condicional en el ‘head’:
<!--[if IE]>
<style type="text/css" media="all">
#capaPopUp {filter:alpha(opacity=65);}
</style>
<![endif]-->
Este condicional quiere decir: Si eres IE añade esta clase.
jQuery en acción…
Primero, añadimos la librería jQuery en el ‘head. Una vez hecho esto insertamos el script para hacer funcionar nuestra capa PopUp (comento las líneas para que sea más fácil entender el script).
/*
* jQuery CSS popUp
* http://dixso.net/
*
* Copyright (c) 2009 Julio De La Calle Palanques
*
* Date: 2009-03-27 12:34:00 - (Viernes, 27 Mar 2009)
*
*/
//Variable que almacenará la posición del scroll, por defecto tiene valor 0.
var scrollCachePosition = 0;
$(function() {
$("#abrirPop").click(function(event) {
scrollCachePosition = $(window).scrollTop();
//Envío el scroll a la posición 0 (left), 0 (top), es decir, arriba de todo.
window.top.scroll(0,0);
//Si el body es mas grande que la capa 'wrapper' incrementa la altura del body a la capa 'capaPopUp'.
if ($("body").outerHeight()>$("#wrapper").outerHeight()){
var altura=$("body").outerHeight();
}else{
//Si la capa 'wrapper' es más grande que el body incrementa la altura de la capa 'wrapper' a la capa 'capaPopUp'.
var altura=$("#wrapper").outerHeight();
}
window.document.getElementById("capaPopUp").style.height=altura+"px";
event.preventDefault();
//Muestro la capa con el efecto 'slideToggle'.
$("#capaPopUp").slideToggle();
//Calculo la altura de la capa 'popUpDiv' y lo divido entre 2 para darle un margen negativo.
var altura=$("#popUpDiv").outerHeight();
$("#popUpDiv").css("margin-top","-"+parseInt(altura/2)+"px");
//Calculo la anchura de la capa 'popUpDiv' y lo divido entre 2 para darle un margen negativo.
var anchura=$("#popUpDiv").outerWidth();
$("#popUpDiv").css("margin-left","-"+parseInt(anchura/2)+"px");
//Muestro la capa con el efecto 'slideToggle'.
$("#popUpDiv").slideToggle();
});
$("#cerrar").click(function(event) {
event.preventDefault();
//Cierro las capas con el efecto 'slideToggle'.
$("#capaPopUp").slideToggle();
$("#popUpDiv").slideToggle();
//Si la variable scrollCachePosition es mayor que 0 incrementará la posición del scroll al valor que se almacenó.
if (scrollCachePosition > 0) {
window.top.scroll(0,scrollCachePosition);
//Reseteamos la variable scrollCachePosition a 0 para poder ejecutar el script tantas veces sea necesario.
scrollCachePosition = 0;
}
});
});
¿Qué hace el script exactamente?
- Calcula la altura actual de todo el ‘body’ para hacer la opacidad.
- Calcula la altura y anchura de la ventana popUp definida en las CSS para poder centrar la capa horizontal y vertical.
- Almacena en una variable la posición del scroll actual para ser redirigido una vez al cerrar la ventana popUp.
- Añade efectos jQuery para la visualización de la ventana PopUp.
¿Ventajas respecto a un iFrame?
No muchas, teniendo en cuenta que en un iFrame se puede interactuar mejor, pero este script es mucho más rápido que un iFrame ya que llama la venta cuando ya está cargada en el código ‘html’.
También este script es útil cuando la venta popUp tiene mucha altura (El scroll sale en el navegador, lo contrario que en un iFrame, el scroll saldría en la propia ventana). Otra ventaja sería que tenemos el control total del evento, es decir, podemos personalizar nuestra ventana popUp a nuestro gusto.
En el ejemplo veréis que he añadido mucho texto para que salga el scroll y poder ver el script con todas sus funcionalidades, el link para “lanzar” el popUp está bajo de todo.
Nota: Este script funciona con TODOS los navegadores incluido el Internet Explorer 6.