Dialog con jQuery

Con jQuery podemos hacer ventanas de diálogo que se abran al pulsar un botón, que se pueden arrastrar, redimensionar y que tienen su botón de cerrar en la esquina superior derecha.

El código html[editar]

Primero hacemos el código html de nuestra página. Lo que será el diálogo no es más que un <div> dentro de la página. Podemos ponerlo en cualquier lado, porque luego ira oculto y cuando se visualice "flotará" sobre el resto de la página.

<!doctype html>
<html>
  <head>
     <meta charset="utf-8">
     <title>Demo</title>
     <link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
     <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
     <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
  </head>
  <body>
      <div id="dialogo" title="titulo">
         <p>soy un dialogo</p>
      </div>
      <button id="abrir">Abrir</button>
      <button id="cerrar">Cerrar</button>
   </body>
</html>

Hemos puesto en el head la hoja de estilo y los jQuery necesarios. El tema CSS es importante para que el diálogo tenga aspecto de diálogo. Puedes bajarte alguno que encuentres por ahí o puedes hacer tu propio tema fácilmente con la aplicación web ThemeRoller.

También hemos puesto el div id="dialogo" que será el dialogo y un par de botones que nos servirán para abrir y cerrar el diálogo.

El código javascript[editar]

Ahora sólo nos queda darle funcionalidad usando las funciones de javascript/jQuery. Para ello ponemos entre tags <script>, después del <body> por ejemplo

<body>
     <script>
        $(document).ready(function() {
           $("#dialogo").dialog({autoOpen:false});
           $("#abrir").click(function(event) {
               // $("#dialogo").dialog('option','position',[event.offsetX, event.offsetY]);
               
               $("#dialogo").dialog('open');
           });
           $("#cerrar").click(function() {
               $("#dialogo").dialog('close');
           });
        });   
      </script>
      ...

Simplemente decimos que cuando el documento esté cargado haga lo siguente:

$("#dialogo").dialog({autoOpen:false}); Al elemento con id="dialogo" (nuestro div) lo convertimos en dialogo (llamando a dialog()). Como parámetro pasamos un {autoOpen:false} de forma que el dialogo se ocultará hasta que lo visualicemos de alguna forma. Si no hacemos esto último, el diálogo será visible desde el principio.
$("#abrir").click(function(event) { Al botón de id=abrir le ponemos una función que se ejecutará cuando se haga click en él. Esta función visualizará el diálogo $("#dialogo").dialog('open');
Hemos puesto comentado // $("#dialogo").dialog('option','position',[event.offsetX, event.offsetY]);. Si lo descomentamos, el diálogo se visualizará en la posición en que se hace click con el ratón, es decir, sobre el botón. Si no, aparecerá centrado.
$("#cerrar").click(function() { Al botón de id=cerrar le ponemos una función que se ejecutará cuando se haga click en el botón. Esa función cerrará el diálogo $("#dialogo").dialog('close');

Más opciones[editar]

Los diálogos de jQuery tienen muchas más opciones. Podemos añadirle botones como "Aceptar", "Cancelar" o lo que queramos, hacer que se pueda o no arrastrar, redimensionar, fijar tamaños, hacer efectos de visualización u ocultar, etc, etc. Aquí tienes todas las opciones http://docs.jquery.com/UI/Dialog