Ventana de Diálogo con HTML – jQuery – jQuery UI

/, Desarrollo Web, jQuery/Ventana de Diálogo con HTML – jQuery – jQuery UI

Con esto de la migración de sistemas de escritorio a la Web, creo que a todos nos ha pasado que el cliente solicita sea lo más parecido a la versión saliente y en html, lo que implica tener que crear ventanas de diálogo sobre todo las de tipo modal, que nos permitan interactuar con la aplicación sin perder la pantalla actual, como por ejemplo confirmar la adición o eliminación de registros, confirmar un envío de correo, enviar advertencias, abrir formularios pequeños, etc., esto es posible con css y en ocasiones es un poco tedioso y complejo, pero ya existen librerías que generalmente en su nombre utilizan las siglas UI por (User Interfase por sus siglas en inglés) y son realmente útiles y muy fáciles de utilizar e implementar.

Comúnmente creamos las ventanas de diálogo con puro html y css, lo que en algunas ocasiones nos resulta un poco complejo a la hora de realizar interacción con las mismas, agregar ciertos botones, etc. Para esto podemos hacer uso de dos frameworks escritos en javascript que en este momento están teniendo mucho auge: jQuery y jQuery UI.

En el post Implementación de Ventana Modal con jQuery y jQuery UI creamos ventanas con diferentes parámetros.

El código completo se puede descargar desde github

Video Tutorial

jQuery UI

Página Oficial jQuery UI

 

jQuery

Página Oficial jQuery

 

Ejercicio

Desarrollar un botón, que al hacer clic sobre este despliegue una ventana modal con un aviso y dos botones, jQuery y jQuery UI cada uno nos enviará al respectivo sitio oficial.

Paso 1

Ingresamos a la página oficial de jQuery UI y descargamos el pluggin, para este ejercicio usaremos las características que se muestran en la imágen, el tema lo dejo a su elección. Es importante mencionar que al descargar este, ya esta incluido jquery

opciones descarga

Opciones jQuery UI

Paso 2

Desempaquetar el archivo y lo colocamos dentro de la carpeta donde implementaremos nuestro ejercicio, en lo personal siempre creo la siguiente estructura:

 

Ubicación jquery

Estructura Sitios

Paso 3

Crear de documento HTML

 

ejemplo jquery ui

Pantalla de Inicio

Código

Creando Ventanas de Diálogo

HTML / jQuery / jQuery UI

button dialog

Diálogo Sencillo

cazaresluis.com

Paso 4

Ahora vamos a ordenar con CSS nuestro index.html hasta obtener la vista deseada, el siguiente código se agregar entre las etiquetas <head></head>

 

Paso 5

Ahora vamos a insertar un div que será nuestra ventana de diálogo, esta deberá ir despues de la apertura de la etiqueta, para posteriormente crearla por medio de jQuery UI

Nuestro código HTML final deberá quedar de la siguiente manera:

Creando Ventanas de Diálogo

HTML / jQuery / jQuery UI

button dialog

Diálogo Sencillo

cazaresluis.com

Implementacion de jQuery y jQuery UI

Con este código javasript lograremos obtener nuestra ventana de diálogo, el botón que la abre y generar las acciones a realizar al hacer clic sobre cada uno de los botones resultantes

jquery dialog()

Ventana de Diálogo Final

Explicación del código

Crear botón que abre la ventana de diálogo

HTML

Diálogo Sencillo

javaScript (jquery ui)

Este código aplica un CSS que le da vista de botón utilizando el tema que previamente seleccionamos, se leería así:

Busca la etiqueta con id igual a dialogoSencillo y aplicale la función button

Crear ventana de diálogo

HTML

javaScript

Este código aplica formato de ventana de diálogo modal y asigna las acciones que se ejutarán al dar clic en cada botón, se lería de la siguiente manera:

Busca la etiqueta con id igual a dialogo y dale formato de diálogo que no se abra automáticamente, que sea del tipo modal, con un largo de 350 pixeles y un alto de 200 pixeles; que cree un botón que al dar clic abra el url http://jquery.com, otro que al dar clic abra el url http://jqueryui.com y uno más que al dar clic simplemente cierre la ventana de diálogo

Asignar la función de abrir la ventana de diálogo

javaScritp

Este código se encarga de asignar la fución al botón que muestra la ventana de diálogo y se leería de la siguiente manera:

Busca la etiqueta con id igual a dialogoSencillo, y cuando se haga clic sobre este, abre la ventana de diálogo con id igual a dialogo

De esta forma ya tenemos lista nuestra ventana de diálogo modal, más adelante creare un ejemplo usando AJAX

En el post Implementación de Ventana Modal con jQuery y jQuery UI creamos ventanas con diferentes parámetros.

By | 2018-03-25T22:33:44+00:00 agosto 21st, 2011|Categories: CSS, Desarrollo Web, jQuery|Tags: , |19 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 +

19 Comments

  1. […] UI + Ajax Tweet Hace ya algunas semanas, publiqué un pequeño ejemplo de como realizar una Ventana de Diálogo con jQuery y jQuery UI esta ventana incluye 3 botones, dos de estos abren un sitio web y el tercero la […]

  2. fernando 29 diciembre, 2011 at 12:46 PM

    amigo puede poner un ejemplo para abrir la ventana modal con un link y no con el boton gracias.

    • Luis Fernando 30 diciembre, 2011 at 9:17 AM

      Hola Fernando muchas gracias por leer mi blog, es my sencillo, y lo puedes hacer de la siguiente manera, creas tu link y le asignas un id, creas el jquery como sigue:

      $(‘#abrirDialogo’).click(function(){
      $(‘#ventanaDialogo’).dialog(‘open’);
      });

      Espero sea de tu ayuda

      Saludos

  3. JavierMMM 6 marzo, 2012 at 4:52 PM

    Hola, me parece muy buen ejemplo, pero le he estado moviendo y no encuentro la manera de, ponerle la información de un formulario, para confirmarlos, y poner dos botones [Aceptar – Cancelar], ¿puedo hacerlo de esa manera?

    • Luis Fernando 7 marzo, 2012 at 10:29 AM

      Hola Javier, si es posible realizar formularios dentro de una ventana en jQuery, en lo personal uso AJAX y jQuery Validate y me ha funcionado perfectamente, en breve estaré publicando un post con un ejemplo de este tipo.

      Por lo pronto te recomendaría ir leyendo y practicando sobre AJAX en jQuery y jQuery Validate

      Saludos

    • Luis Fernando 13 marzo, 2012 at 1:01 PM

      Javier buenas tardes, ya esta listo el post sobre lo que deseas hacer, te invito a visitar mi sitio

      Saludos

  4. […] UI + Formulario + jQuery.Validate Tweet Como ya había comentado con anterioridad en el post Ventana de Diálogo con HTML – jQuery – jQuery UI hoy en día las aplicaciones web deben ser muy parecidas a sus predecesoras versiones de […]

  5. Renzo 12 abril, 2012 at 1:40 PM

    Gracias por este post me dejó claro varias cosas, ahora una pregunta:

    * El dialogo lo puse que se ejecutara al pulsar en el boton (submit) de borrar del formulario.
    * Efectivamente levanta el dialogo de “confirmacion” donde hay dos botones uno de ok y cancelar.
    * Ahora lo que no logro es que cuando la persona le de OK, siga con el envio del POST del formulario y si hace cancelar no lo envie.

    Alguno guia o ayuda?

    Gracias de antemano, Saludos

  6. DSK25 23 diciembre, 2012 at 11:12 AM

    Gracias por este tutorial, me sirvio bastante, muy util en verdad 😀

  7. Rene 20 enero, 2013 at 6:39 AM

    Amigo me sirvió bastante su explicación, me sacaste de un apuro

    • Luis Fernando Cázares Bulbarela 20 enero, 2013 at 8:44 PM

      Hola buenas noches René, muchas gracias por tus comentarios, me da mucho gusto saber que mi trabajo esta ayudando a la comunidad.

      Saludos

  8. Wilmer 25 junio, 2013 at 12:40 PM

    No había visto un mejor blog sobre este tema, com veras a la fecha las versiones de jquery son otras no pude lograr que funciones con jquery 1.9.1, por otro lado, trabajo con zend framework, puedo cargar en los modales los formularios, mi gran problema es que en estos no puedo cargar otros componente sean o no de jquery, es decir que un datepicker no funciona en el modal, existe alguna manera de cargar estos componentes en el modal?.

    • Luis Fernando Cázares Bulbarela 25 junio, 2013 at 1:24 PM

      Hola buenas tardes Wilmer, muchas gracias por tus amables comentarios, en cuanto a lo de zendframework la verdad no lo conozco, pero encontré este link ZendX_JQuery, a lo mejor te puede servir.

      Saludos

  9. Bernie Ayala 17 julio, 2013 at 10:28 AM

    Muchas Gracias, amigo, es justo lo que necesita y se acopla perfectamente a lo que estoy haciendo con algunas modificaciones, Gracias.

    • Luis Fernando Cázares Bulbarela 17 julio, 2013 at 9:37 PM

      Hola Bernie, muchas gracias por seguir mi trabajo, me da gusto saber que es de ayuda para compañeros developers.

      Saludos

  10. jimmy 21 noviembre, 2015 at 8:01 PM

    Hola Luis,
    saludos por tu trabajo. Y quiero pedirte ayuda, necesito cerrar una ventana de dialogo que se abre innecesariamente cuando escribo un dato en un textbox y presiono enter, Se abre automáticamente:

    Este es el codifo del dialogo. Como hago para crearles una función que la cierre, y yo llamar a esa función para el evento clic de mi textbox??

    $(‘#dlgRegCliente’).dialog(
    {
    autoOpen: false,
    resizable: false,
    modal: true,
    closeOnEscape: true,
    width: 650,
    draggable: true,
    title: “Registrar”,
    open: function (type, data) {
    $(this).parent().appendTo(“form”);
    }
    });

    Gracias.

    • Luis Fernando Cázares Bulbarela 23 noviembre, 2015 at 11:14 AM

      Hola buenos días Jimmy muchas gracias por contactarme, te sugiero revisar la documentación de JQuery UI Dialog específicamente las opciones referentes a Botones, esa te dará una mejor perspectiva para realizar lo que necesitas.

      Saludos

Comments are closed.

Desarrollo Web

Silex - Sistema de Registro