CSS PopUp jQuery & Ajax
Este post es la segunda parte del primer post, ya que se ha mejorado el script.
Mejoras implementadas:
- El script añade automáticamente las capas, no hace falta insertar el código en cada página.
- Se carga el contenido por Ajax.
- Podemos pasarle parámetros de anchura de la capa.
//Variable que almacena la posición del scroll, por defecto tiene valor 0.
scrollCachePosition = 0;
function popupCssShow (URL, width, height) { //Parámetros: URL (URL, Anchura de la capa, Altura de la capa)
if (typeof document.body.style.maxHeight === "undefined") {//Añade la propiedad maxHeight para IE6.
$("body","html").css({height: "100%", width: "100%"});
}
//La capa 'cssBackground' ocupa toda la pantalla para darle una opacidad.
//La capa 'cssPopupContainer' es la capa madre del PopUp.
if (!$("#cssBackground").length>0) {
$("body").append("<div id=\"cssBackground\"></div><div id=\"cssPopupContainer\"><div id=\"cssPopup\"></div></div>"); //Añade las capas en la página.
}
if (width!=undefined) {
$("#cssPopup").css("width",width);
}
if (height!=undefined) {
$("#cssPopup").css("height",height);
$("#cssPopup").css("overflow","auto");
}
$("#cssBackground").slideDown("slow"); //Efecto jQuery
scrollCachePosition = $(window).scrollTop();
window.top.scroll(0,0);
$("#cssPopup").load(URL,function(){
//$("#cssPopupContainer").center(); //Si activamos esta línea y desactivamos la de abajo nos centrará el PopUp en el medio de la pantalla.
$("#cssPopupContainer").css("top",50);
ancho=$(window).width();
$("#cssPopupContainer").slideDown("fast", function () {
anchopopup=$("#cssPopup").width();
$("#cssPopupContainer").css("width",ancho);
});
});
}
function popupCssHide () {
$("#cssPopupContainer").slideUp("fast", function () {
$("#cssBackground").fadeOut("fast",function () {
$("#cssBackground").remove(); //Elimina la capa 'cssBackground'.
$("#cssPopupContainer").remove(); //Elimina la capa 'cssPopupContainer'.
});
});
if (scrollCachePosition > 0) {
window.top.scroll(0,scrollCachePosition); //Vuelve a la posición donde estaba el scroll.
//Reseteamos la variable scrollCachePosition a 0 para poder ejecutar el script tantas veces como sea necesario.
scrollCachePosition = 0;
}
}
La hoja de estilos quedaría de la siguiente manera:
#cssBackground {height:100%; width:100%; background-color:#000; display:none; position:fixed; top:0; left:0; z-index:100; float:left; opacity:0.65;}
#cssPopup {margin:0 auto;}
#cssPopupContainer {position:absolute; display:none; z-index:101; width:100%;}
Para que IE6 haga la opacidad y la posición fija tendremos que insertar álgún hack en un condicional en el ‘head’:
<!--[if lt IE 7]>
<style type="text/css" media="all">
#cssBackground {_position:absolute !important; filter:alpha(opacity=65);}
</style>
<![endif]-->
Para que IE7 haga la opacidad insertamos lo siguiente con un condicional en el ‘head’:
<!--[if IE 7]>
<style type="text/css" media="all">
#cssBackground {filter:alpha(opacity=65);}
</style>
<![endif]-->
Según la URL que venga añadirá un fichero u otro:
Estructura del PopUp:
<?
if ($_GET['page']=="pagina-1") {
include ("includes/pagina-1.php");
}elseif ($_GET['page']=="pagina-2") {
include ("includes/pagina-2.php");
}
?>
Si le pasamos page=pagina-1 incluirá el fichero pagina-1.php tal y como lo pongo en la condición de arriba.
Para llamar al popup sería de la siguiente forma:
<a href="javascript:void(0);" onclick="popupCssShow('popup.php?page=pagina-1', 460);" title="Abrir PopUp">Abrir PopUp</a>
También le pasamos el parámetro ’460′ para que nos habrá la ventana a ’460px’.
Podéis ver un ejemplo aquí.
Descarga del ejemplo aquí.
Nota:
Para que os funcione tenéis que alojar el directorio en vuestro servidor o en local, ya que el ejemplo utilizo php para abrir un fichero u otro.