En ejemplos anteriores hemos realizado la implementación de una ventana modal con jquery, siempre de la mano de un formulario, inclusive una sencilla pero con botones, en esta ocasión vamos a ver a detalle como crear una ventana modal con jQuery y jQuery UI, explicando la mayoría de los parámetros que podemos utilizar, inclusive creando ventanas no modales.

Usos de una ventana modal con jQuery

Ventana Modal con jQuery

Principalmente una ventana modal con jQuery se utiliza para emular desde la típica ventana de atención con opciones aceptar y cancelar hasta incrustar formularios e imágenes, existen librerías como colorbox, jquery tools y por supuesto jQuery UI entre otras que nos permiten hacer este tipo de ventanas.

En muchos casos es recomendable no depender en exceso de Plugins o librerías de jQuery, en ocasiones resulta mas sencillo crear nuestra ventana modal con puro CSS y etiquetas HTML, dando la funcionalidad de abrir, cerrar inclusive de los botones con jQuery o javascript.

Principales características de una ventana modal con jQuery UI

Una de las principales ventajas de utilizar jQuery UI dialog es la facilidad con que podemos customizar cada ventana modal con jQuery que creamos, inclusive podemos utilizar dentro del mismo documento html varias ventanas con distintas características ademas de poder llamar una a partir de otra sin ningún problema, sólo hay que cuidar el z-index y listo..

Opciones más importantes
  1. autoOpen: Lanza la ventana al momento de cargar la página.
  2. buttons: permite añadir botones y asignar un callback a cada uno de ellos.
  3. closeOnScape: cierra la ventana cuando el usuario presiona la tecla ESC.
  4. width y height: para establecer las dimensiones de la ventana.
  5. modal:para indicar si es una ventana modal con jQuery o normal.
  6. title:modificar el título de la ventana antes e inclusive al momento de abrirla.
  7. zIndex: inicializa la ventana con la propiedad CSS z-index indicada.
Eventos más importantes
  1. Open: Indica cuando se abre una ventana.
  2. beforeClose: ejecuta una acción antes de que la ventana se cierre.
  3. close: permite asignar un callback para el momento del cierre de la ventana.
Métodos más importantes .dialog(‘método’)
  1. open: indicar cuando abrir una ventana.
  2. close: indicar cuando cerrar una ventana.
  3. option: obtener o modificar cualquier opción de una ventana.

Es importante mencionar que en la ventana modal con jQuery se pueden usar clases y estilos del framework como se especifica en la documentación oficial de jQuery UI Dialog.

Implementando una ventana modal con jQuery y jQuery UI

En este post voy a modificar un poco la forma de presentar los ejemplos gracias a que han tenido buena aceptación los vídeos, lo que haré es publicar el paso a paso en un screencast y el código final lo subiré a mi repositorio GitHUB.

Lo que haremos en la implementación de la ventana modal con jQuery será lo siguiente:

Descargar el jQuery UI únicamente con las opciones para botones y dialog.

Crearemos un archivo HTML con varios botones y tipos de ventana, además de implementar las acciones, eventos y métodos más importantes.

Como lo comenté al principio del post, no siempre se deben usar la ventana modal con jQuery en nuestros desarrollos, es importante establecer que tan necesaria es y sobre todo como la vamos a hacer funcionar.

¿NECESITAS APOYO PARA TUS DESARROLLOS WEB?

Desarrollo aplicaciones web a la medida, sistemas integrales de registro y reservación de hospedaje, front y back end, formularios de contacto todo con twig, php, mysql, jquery.

Contáctame

¿Te ha agradado este artículo?

Te invito a compartirlo en tus redes sociales o en su defecto a registrarte en mi newsletter en donde recibirás información de cada nuevo post o tutorial que publique.