Motrar popup con jQuery UI

Un popup es una ventana emergente que sirve para informar al usuario o advertirle acerca de una acción que va a realizarse, con Javascript podemos crear este tipo de ventanas con un simple “alert()”, el problema es que esta caracteristica de Javascript no permite la inserción de código, solo podemos insertar texto y caracteres escapados, tampoco podemos redimensionar las ventanas.

¿Y que pasa si necesitamos insertar un video, una imagen o un enlace en un popup?, para llevar a cabo esta tarea debemos recurrir a una herramienta mas potente, para este articulo he elegido el framework de jQuery user interface, por su sencillez y multitud de opciones, como la inserción de código o la redimensión y arrastre de las ventanas.

Descarga y configuración

En primer lugar descargamos la libreria de jQueryUI desde su Web oficial, en la que podemos elegir que caracteristicas queremos incluir en el builder, por defecto, el builder incluye todas las caracteristicas, podemos descargarlo de esta forma o seleccionar solamente las opciones que necesitamos, el archivo .zip que descargamos incluye las hojas de estilo, las imagenes necesarias y las funciones.

Para el ejemplo que vamos a realizar solo necesitamos que esten marcadas las siguientes opciones:

UI Core

Core

Widget

Mouse

Position

Interactions

Draggable

Resizable

WIdgets

Button

Dialog

Personalización

jQuery UI nos ofrece la posibilidad de seleccionar un “theme” para personalizarlo a nuestro gusto antes de descargarlo, para crear el ejemplo he seleccionado el theme “Smoothness” que en nuestro caso solamente afectará visualmente al popup, ya que este articulo se basa principalmente en hacer uso del mínimo de características posibles para llevar a cabo la tarea que vamos a realizar y reducir al máximo la carga de la página.

Una vez descargado el builder, eliminamos todos los archivos que no vamos a necesitar para realizar el popup, solamente vamos a necesitar la carpeta “images” y el archivo “jquery-ui.css”, creamos nuestro propio documento HTML en blanco en la carpeta raiz.

En la cabecera del documento HTML incluimos un enlace a la hoja de estilos y los CDN para jQuery y jQuery UI, es muy importante destacar que primero debemos llamar a la libreria de jQuery y posteriormente a la de jQuery UI.

<link href="jquery-ui.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Si os estais preguntando porque hemos seleccionado las opciones del builder cuando vamos a trabajar con CDN para las librerias de jQuery y jQuery UI la razón es obvia, reducir el peso de la hoja de estilos.

En el body tenemos que crear dos elementos importantes para llevar a cabo este ejemplo, el primero de ellos será el encargado de llamar al “popup”, puede ser un botón, un enlace, un span, en párrafo o cualquier elemento “clickeable”, para simplificar el articulo, creamos un botón tipo “button” con un identificador, en el ejemplo le he llamado “boton”, vale que no es muy original, pero al menos es intuitivo 😉

<button type="button" id="boton">Abrir PopUp</button>

El segundo elemento imprescindible es el elemento que contendrá el popup, este debe de ser un elemento <div> preferiblemente, ya que insertaremos codigo en su interior, el <div> debe tener también un identificador y un atributo “title”, el valor del atributo “title” será el titulo de la ventana del popup

<div id="popup" title="Popup">
	...
</div>

Ahora solo nos queda crear la función que ejecutará el popup, el proceso es sencillo, en un script escribimos el codigo jQuery de la siguiente forma, en primer lugar ocultamos el elemento con identificador popup, posteriormente con el evento “click” mostramos el elemento.
Por ultimo, para mostrar el widget dialog de jQuery UI, tenemos que llamar a la función “dialog()”.

<script>
$(function() {
	$("#popup").hide();
		$('#boton').click( function(){
			$("#popup").show();
			$("#popup").dialog();
		}
	);
});
</script>

Los widgets en jQuery UI son controles con funciones de interfaces de usuario que nos aportan la riqueza de las aplicaciones de escritorio en la web.

Botones de confirmación

Vamos a generar un codigo nuevo para el body, añadimos a los identificadores “_confirm” o cualquier cosa que se nos ocurra para que el identificador no sea el mismo que en el ejemplo anterior, recuerda qque el atributo “id” debe de ser único en el documento, creamos un nuevo script que mostrará los botones de confirmación.

<button href="#" id="boton_confirm">Abrir Popup</button>
	<div id="popup_confirm" title="Confirmar">
		<p>...</p>
	</div>
<script>
$(function() {
	$( "#popup_confirm" ).dialog({
		autoOpen: false,
		width: 400,
		buttons: [ {
			text: "Aceptar",
			click: function() {
			$( this ).dialog( "close" );
		}},{
			text: "Cancelar",
			click: function() {
				$( this ).dialog( "close" );
			}
		}]
	});
	$(function() {
			$('#boton_confirm').click( function(){
				$( "#popup_confirm" ).dialog("open");
			}
		);
	});
});
</script>

Efectos

Una de las cosas que mas me gustan de este framework son los efectos, podemos abrir una ventana con una animación utilizando los parametros “show” y “hidde”, al igual que en el ejemplo anterior, cambiamos los identificadores de los elementos, para el ejemplo he añadido “_effect” a los identificadores.

<button type="button" id="boton_effect">Abrir PopUp</button>
<div id="popup_effect" title="Popup" style="text-align:center;">
	<p>
		Ejemplo de efectos creado con jQueryUI
	</p>
</div>
<script>
	$(function() {
		$( "#popup_effect" ).hide();
			$('#boton_effect').click( function(){
				$( "#popup_effect" ).show();
				$( "#popup_effect" ).dialog({
					show: "blind",
					hide: "explode"
				});
			}
		);
	});
</script>

Hasta aquí hemos visto como funciona esta caracteristica y hemos creado un botón el cual podemos personalizar, pero en la mayoria de proyectos vamos a necesitar personalizar también el popup que viene con sus estilos por defecto, he subido un ejemplo a Github en el que se sobreescriben los estilos mediante un archivo llamado popupstyle.css de poco mas de 130 lineas, no incluye imagenes, solamente los iconos de cerrar que están enlazados online en el archivo popupstyle.css, puedes modificarlo a tu gusto, publicarlo o compartirlo atribuyendo siempre la autoria del mismo.

Existen muchas mas caracteristicas que nos quedan por ver de este framework, en proximos articulos hablaremos sobre algunas de ellas.

Puedes ver más ejemplos en la Documentación oficial de jQuery user interface.