Implementación de Ventana Modal con jQuery y jQuery UI

/, jQuery/Implementación de Ventana Modal con jQuery y jQuery UI

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.
By | 2018-03-25T22:33:41+00:00 septiembre 18th, 2012|Categories: Desarrollo Web, jQuery|Tags: , , , |21 Comments
Desarrollador web front y back end, php, mysql, css3, html5, twitter bootstrap, jquery . . . twitero, bloguero, consultor de IT y padre de dos hermosos bodoques. Visita mi Perfil en Google +

21 Comments

  1. […] el post Implementación de Ventana Modal con jQuery y jQuery UI creamos ventanas con diferentes […]

  2. Luis 30 octubre, 2012 at 9:06 AM

    Veo con interés tu página y a lo mejor me puedes ayudar. Tengo preparada una web con algun video que se abre en una ventana modal, con un ordenador la ventana se abre y se ve el video pero cuando lo habro desde un teléfono móvil, una Tablet o un iPad se abre la ventana pero no se ve el video. Si puedes ayudarme te estaría agradecido.
    puedes contestarme a esta dirección porrute@gmail.com

    gracias

    • Luis Fernando Cázares Bulbarela 30 octubre, 2012 at 12:12 PM

      Hola Luis buenas tardes, haciendo memoria te recomiendo uses iframes por una parte, otro es que veas la posibilidad de cambiar jquery ui por colorbox o jquery tools, también es importante determinar de donde proienen tus videos, de youtube o estan en tu servidor, es recomendable tenerlos en youtube y es mucho mas sencillo incrustarlos.

      Saludos

  3. Carlos 10 noviembre, 2012 at 6:59 PM

    Existe una posibilidad de poder descargar este código?

  4. Alexis Rebolledo 31 enero, 2013 at 2:30 PM

    Hola Luis, espero que este bien donde estoy escribiendo para hacer una consulta. Siguiendo tus vídeos, hice una ventana modal con un campo input, que al insertar un dato y al perder el foco traiga una respuesta ajax, como no he podido cargar los demás input con datos desde la base de dados con json, buscando información, vi un efecto que me pareció interesante, pero, no lo he podido implementar, que es que la ventana crezca al traer la respuesta html de ajax con campos ya llenados desde el archivo php, me podrías orientar para lograr esto. Saludos desde Chile.

  5. antonio pavon 3 julio, 2013 at 11:01 AM

    oe un favor si puedes sube varios ejemplos de ventanas modales no triste comentarios de como hacer una modal sube eejmplos plausibles que uno pueda apreciar e interactuar con ellos reverendo cojudto

    • Luis Fernando Cázares Bulbarela 3 julio, 2013 at 12:33 PM

      Hola buenas tardes Antonio, gracias por tus amables comentarios, ¿como que tipo de ejemplo o funcionalidad te gustaría aprender?, si esta en mis manos poder subir algo con todo gusto.

      Que tengas un excelente día.

      Saludos

  6. yarell 15 agosto, 2013 at 4:41 PM

    Hola acabo de ver tu post la verdad me facinó y creo que talvez podrias ayudarme con mi duda que tengo. Me gustaría saber si sabes como se puede desaparecer un alerta automaticamente sin la necesidad de apretar el botón de ACEPTAR, espero que me contestes la verdad estoy desesperada.

    Te dejo mi correo: susi_yarell_21@hotmail.com

    • Luis Fernando Cázares Bulbarela 15 agosto, 2013 at 11:54 PM

      Hola buenas noches Susi, quieres que el alert se cierre sin que el usuario haga algo para este efecto?, ummmm aquí tendrías que hacer una especie de temporizador que ejecute el $('#ventana').dialog('close'); , checate JavaScript Timing Events

      Saludos

  7. Jose Casillas 20 septiembre, 2013 at 9:38 PM

    Hola luis desde hace ya rato he venido siguiendo tu trabajo y me parece excelente, tengo poco tiempo en la programacion basada en php, ajax, javascript, actualmente me estoy formando y quiero enseñarles a mis alumnos a como usar estas herramientas, bien tengo este escenario.

    tengo una pagina inicial que se llama reinscripciones.php en la cual ingreso el numero de control del estudiante, nombre, y tengo otra pagina que se llama buscar_alumno.php en esta conforme voy escribiendo el numero de control me va mostrando los datos generales de los alumnos, he agregado esta pagina en la de reinscripciones.php para que me la muestre en una ventana modal, lo que intendo hacer es una vez que selecciono una fila con los datos de alguno alumno estos se coloquen en los campos que le correspondan en el formulario de reinscripciones… en tus videos y codigos que has publicado he aprendido mucho para ser honesto, solo que no encuentro la forma de como transferirlos.
    espero y tengas tiempo de leerlo y si me podrias dar una orientacion te lo agradecere bastante… que estes bien y espero, sigas aportando muchos articulos mas. Gracias!!

    • Luis Fernando Cázares Bulbarela 20 septiembre, 2013 at 11:15 PM

      Hola buenas noches José muchas gracias por tus comentarios, me da mucho gusto saber que estas aprendiendo. En cuanto a la consulta me ayudaría mucho ver las pantallas de que es lo que quieres hacer, no me queda muy claro de donde a donde quieres pasar los datos.
      Por favor enviame el material a mi correo luis.f.cazares@gmail.com

      Saludos

  8. Fernando 19 agosto, 2014 at 11:15 AM

    Hola luis mucha gracias por tu aporte, tengo una duda se puede abrir otra pagina en el dialog en vez de un div de la misma pagina intente hacerlo con sig codigo que utilizo con un plugins

    $.post(“detalles.php”, function(data){

    $(data).dialog({
    autoOpen: true,
    modal:true,
    widht:300,
    height:300
    });

    });

    Pero no me resulto espero q me puedas ayudar gracias

    • Luis Fernando Cázares Bulbarela 19 agosto, 2014 at 11:22 AM

      Hola buenos días Fernando, muchas gracias por seguir mi trabajo, no comprendo muy bien lo que deseas hacer, quieres meter un sitio web dentro de un modal?

      Saludos

  9. diana 3 marzo, 2015 at 1:52 PM

    hola…tengo una pregunta como puedo evitar que choque un evento blur con el close del dialogo? me explico tengo en el dialogo dos inputs uno de ellos cuando pierde el foco pide que ingrese datos, es una forma de evitar que el campo este vacio, pero al momento de querer cerra el dialogo obviamente pierde el foco y me mando el mensaje de que ingrese datos y no me deja cerrar el dialogo como puedo hacer para que estas dos acciones no choquen

  10. Jorge 4 septiembre, 2015 at 4:19 PM

    hola gran trabajo podrias ayudarme quiero ejecutar una ventana modal desde un Href para mostrar unas observaciones desde mi base de datos en mysql veo que lo tienes ejecutado con botones soy nuevo en esto podrias orientarme por favor

    • Luis Fernando Cázares Bulbarela 5 septiembre, 2015 at 12:20 AM

      Hola Jorge es sencillo aquí el código

      $('body').on('click', '#id-del-href', function(event) {
      event.preventDefault(); // Importante
      /* Act on the event */

      // Hacer Algo
      });

  11. Alberto Rojas 6 abril, 2017 at 9:55 AM

    Hola…
    Estoy intentando crear un modal con varios botones, es para generar diferentes tipos de reportes, el caso es que no se como capturar que botón se ha presionado, existe la posibilidad de poder hacer esto?

    • Luis Fernando Cázares Bulbarela 16 mayo, 2017 at 10:53 PM

      Hola debes crear botones con la etiqueta a y asignar un id, con javascript o jquery utiliza onclick + el id del botón.

      Saludos

Comments are closed.

Desarrollo Web

Silex - Sistema de Registro