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[edit]
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[edit]
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[edit]
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