Ventanas en jQuery
Se pueden crear ventanas emergentes en jQuery mediante el método dialog() aplicado a un elemento: $(“#idElmento”).dialog(). Estas ventanas pueden hacer la misma función que los popups típicos de Javascript pero de una forma mucho más elegante y usable. Además, con este tipo de ventanas evitamos que los navegadores las deshabiliten, algo muy común hoy en día para combatir la publicidad no deseada (spam).
Dentro del método dialog() podemos pasar las siguientes opciones que nos van a permitir forzar los diferentes estados de la misma (una ventana puede estar abierta o cerrada):
- $(“#idElmento”).dialog('open') = abre la ventana.
- $(“#idElmento”).dialog('close') = cierra la ventana.
- $(“#idElmento”).dialog('isOpen') = devuelve true en caso de que la ventana este abierta
En el siguiente código se creara una ventana con información sobre un libro. Dicha ventana puede ser cerrada en cualquier momento pulsando sobre la X en la esquina superior derecha, una vez hecho esto desaparecerá, pero podrá volver a mostrarse al pulsar sobre el botón “abrir ventana” que invocará al método dialog('open').
<html>
<head>
<link type="text/css" href="temaVerde.css" rel="stylesheet" />
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#ventana").dialog();
});
</script>
</head>
<body>
<div id="ventana" title="Libro">
<table>
<tr>
<td>
<img src="1.jpg">
</td>
<td>
<div><b>Titulo</b></div>
<div>
descripcion, descripcion, descripcion, descripcion,
descripcion, descripcion,descripcion, descripcion,
descripcion, descripcion, descripcion, descripcion,
descripcion, descripcion, descripcion, descripcion,
descripcion, descripcion, descripcion, descripcion.
</div>
</td>
</tr>
</table>
</div>
<button onClick="$('#ventana').dialog('open');">
Abrir ventana
</button>
</body>
</html>
