Tutorial: Ventanas emergentes con JQuery

Área: Diseño Web & Ecom

Con la ayuda de jQuery y jQueryUI se pueden crear y controlar muy fácil ventanas emergentes (dialogs). Estas “ventanas popup” son muy útiles para mostrar información variada, cómo el típico aviso legal, un mapa con datos de contacto o un call to action. Por defecto las ventanas emergentes de jQueryUI tienen un título, un botón de cierre y un imagen en la esquina que permite cambiar el tamaño, pero todo se puede modificar al gusto con un poco de JavaScript. En este tutorial veremos cómo hacerlo

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');
});
}
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*