JQuery es una excelente librería JavaScript que simplifica la manipulación del DOM (Document Object Model) de una página HTML, el manejo de eventos, animaciones y AJAX. Así también, desde hace un tiempo atrás provee una librería de componentes UI que extiende los componentes iniciales de esta librería.
El widget de tipo diálogo es un ventana flotante que tiene un título y contenido (similar a un popup). Este widget resulta ser muy útil para mostrar alertas o formularios que el usuario debe llenar antes de poder continuar. Veamos como lograr lanzar un dialog apenas carga la página
<script type="text/javascript" src="/assets/javascript/jquery-1.4.min.js"></script>
<script type="text/javascript" src="/assets/javascript/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#dialog").dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>Ejemplo tomado de la página web de Jquery
Como puede apreciarse en el código anterior, esta es una solución muy sencilla para hacer un widget dialog; sin embargo, cuando se desarrolla un sistema de mayor complejidad lo ideal es separar las ventanas en múltiples archivos y los diálogos no son la excepción. Una implementación bastante difundida en la web es utilizar un elemento iframe en vez de una etiqueta div para construir el contenido del diálogo. Veamos un ejemplo para que quede más clara la idea.
<script type="text/javascript">
$(function() {
$('a.showPopup').click(function(e) {
e.preventDefault();
var $this = $(this);
var horizontalPadding = 15;
var verticalPadding = 15;
$('<iframe id="site" src="' + this.href + '" />').dialog({
title: ($this.attr('title')) ? $this.attr('title') : 'Site',
autoOpen: true,
width: 600,
height: 300,
modal: true,
resizable: false,
autoResize: true,
overlay: {
opacity: 0.5,
background: "black"
}
}).width(600 - horizontalPadding).height(300 - verticalPadding);
});
});
</script>
<a class="showPopup" href="http://www.google.com" title="Google">Como puede apreciarse en el ejemplo anterior, se utiliza un pseudo iframe, al cual le asignamos la dirección con el contenido que queremos mostrar en el diálogo. Algunas posibles mejoras a esta idea inicial sería crear una función que permita reutilizar el código en otros enlaces, pero eso se los dejo como tarea.
