Tutorial: Ventanas emergentes con JQuery

Preparación

Para que funcione la ventana emergente primero hay que incluir en el elemento los scripts de jQuery y jQueryUI. Por ejemplo así:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js”></script>

Aparte de esto, también hay que subir el CSS de jQueryUI y sus imágenes. Una vez hecho, se puede empezar con la creación de la ventana.

Creando una ventana básica

Después de insertar los JavaScripts, CSS e imágenes se puede empezar con la ventana emergente, que es muy simple.

Una ventana está formada por dos partes, HTML que es el que le da forma y contenido, y el JavaScript que es el que lo controla.

HTML:

<div id="”dialog”" title="”dialog">
Contenido de la ventana
</div>

JavaScript:

<script type="”text/javascript”">
$(function() { 
$(“#dialog”).dialog(); 
});
</script>

Si no queremos que la ventana JQuery se abra automáticamente, sólo hace falta poner la llamada $(“#dialog”).dialog(); en una función a la cual la llamamos con un botón

Creando una ventana con animación

Además de abrirla normalmente, también se puede abrir una ventana con una animación. Solo hay que añadir los parámetros show o hide. Por ejemplo así:

$( “#dialog” ).dialog({
autoOpen: false,
show: “blind”,
hide: “explode”
});

Ventana modal y confirmación

A veces, es muy útil deshabilitar el contenido de fondo para fijar el foco del usuario en nuestra ventana emergente. Sobre todo con ventanas que tienen que aceptarse (cómo un aviso legal o similar). En la ventana emergente de jQueryUI se puede hacer con un solo parámetro: “modal: true”.

Ventanas emergente con AJAX

Además de preparar el sistema como ya explicábamos al principio del artículo, el siguiente paso es crear la función de JavaScript.

Ejemplo popup JQueryUI con AJAX:

function mostrarDialog() {

// La ruta Ajax
var url = 'ruta a datos';

// mostrar un imágenes de cargando a través de CSS
var dialog = $('

<div class="loading" style="display: none;"></div>

').appendTo('body');

// abrir el dialog
dialog.dialog({

// añadir un listener para borrar el dialog al cerrarlo
close: function(event, ui) {

// borra el div con sus eventos y datos
dialog.remove();
},
modal: true,
title: 'titulo de la ventana',
width:918,
height:450
});

// Cargar contenido con Ajax en la ventana
dialog.load(
url,
{}, // Datos para enviar (en este caso, ninguno)
function (responseText, textStatus, XMLHttpRequest) {
// Quitar el class de “cargando”
dialog.removeClass('loading');
}
);
}

En este ejemplo se crea el dialog, se carga con Ajax y se borra al cerrar.

Ventana emergente sin barra de cierre

Por defecto, la ventana emergente tiene una barra grande con un botón de cerrar, pero algunas veces nos interesa que no sea así. Para lograr esto simplemente hay que añadir lo siguiente dentro del “open”.

open: function(event, ui){
$(".ui-dialog-titlebar").hide();
}

Quitando la barra de arriba se quita el botón de cerrar por defecto. Pero no pasa nada, podemos añadir unas líneas que permitan cerrar la capa haciendo clic fuera de la ventana emergente. Quedaría así:

open: function(event, ui){
$(".ui-dialog-titlebar").hide();
$('.ui-widget-overlay').bind('click',function(){
dialog.dialog('close');
});
}