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