Dialogs para tu diseño web
Gracias a jQuery y jQueryUI podemos crear ventanas modales o dialogs de forma muy fácil.
Las ventanas emergentes son útiles para mostrar información, imágenes, mensajes de aviso o advertencias y presentan unas características por defecto como:
– El título
– Botón de cerrar
– Imagen en la esquina para cambiar el tamaño
Estas propiedades se pueden modificar según los gustos de cada uno utilizando Javascript o JQuery.
El primer paso para que podamos disfrutar de nuestra ventana modal es incluir en la etiqueta head los scripts de JQuery y JQueryUI:
<head>
<script type=»text/javascript» src=»/js/jquery-1.10.2.js«></script>
<script type=»text/javascript» src=»/js/jquery-ui.js«></script>
</head>
Estos scripts puedes descargarlos previamente o indicarle la url de googleapis donde se encuentran dichos archivos.
Además, incluiremos los estilos CSS y las imágenes para que el dialog sea profesional.
<link rel="stylesheet" type="text/css" href="/css/jquery-ui.css" />
Una vez realizados estos pasos, podemos crear la ventana. Por un lado tendremos el HTML:
<div id="dialog" title="Aviso"> <p>Contenido del aviso.</p> </div
Y por otro lado, tendremos el Javascript que controla cuándo y cómo aparece la ventana emergente o pop up.
<script type=”text/javascript”>
$(function() {
$(“#dialog”).dialog();
});
</script>
Si no queremos que la ventana no se abra de forma automática podemos crear un evento en un botón para cuando hagamos clic sobre él se muestre la información. En el siguiente ejemplo podemos ver cómo quedaría:
<head>
<link rel=»stylesheet» type=»text/css» href=»/css/jquery-ui.css» />
<script type=»text/javascript» src=»/js/jquery-1.10.2.js«></script>
<script type=»text/javascript» src=»/js/jquery-ui.js«></script>
</head>
<body>
<input id="send" value="Aviso">
<div id="dialog" title="Aviso">
<p>Contenido del aviso.</p>
</div>
</body>
<script>
$("#send").click(function() {
$("#dialog").dialog({
show: "scale", // animación de la ventana cuando aparece
hide: "scale", // animación al cerrar la ventana
resizable: "false", //fja o redimensionable si ponemos este valor a "true"
position: "center", // posición de la ventana en la pantalla.
modal: "true",
buttons: [{
click: function() {
(this).dialog("close");
},
icons: {
primary: "ui-icon-cancel"
},
text: "Cerrar",
showText: false
}]
});
});
</script>
De esta manera, con un conocimiento básico de Javascript y JQuery podemos crear pop ups de todo tipo y darle un toque más profesional a nuestro diseño web.
