Como pueden leer en la parte de arriba, les voy a mostrar como hacer un dialog simple de jquery. El dialogo consta de un título, un simple mensaje y el boton de aceptar.
Conforme los usuarios vayan opinando ire mostrando opciones para poder manipular el dialogo, pero las mas comunes y que voy a usar aqui es que el dialogo se muestre en forma Modal. ¿Qué significa esto? que al mostrar un dialog en la forma Modal este ocupara toda la pantalla del navegado hasta que el usuario lo cierre. Aquí el ejemplo.
y el código que nos produce este resultado es el siguiente:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $(document).ready(function(){ $("#mostrarDialog").click(function() { $("#ejemDialog").dialog("open"); }); var cancel = function(){ $("#ejemDialog").dialog("close"); } $("#ejemDialog").dialog({ autoOpen:false, width: 250, height: 250, modal:true, zIndex: 3999, position: [150,150], buttons: { "Aceptar": cancel } }); |
El código de arriba es lo que hace la magia con jQuery, y estamos diciendo que sea modal, con un tamaño de 250×250 pixeles y que tenga un posición de 150×150 pixeles con respecto a nuestro explorador, ya que el dialogo aparece en posición absoluta.
Pero falta de mencionar algo. ¿En donde esta esa información que aparece en el dialogo? La respuesta es muy simple. Es un codigo html que ponemos dentro de una “div” el cual contiene el ID al cual vamos a hacer la referencia con jQuery, el Título de nuestro dialogo y finalmente el contenido que deseemos con un lindo boton. El html es escondido por jQuery UI y se mostrará cuando uno se lo indique. El codigo html es el siguiente:
Si tienen alguna duda respecto al código no duden en ponerla, recuerden que pueden encontra mas informacion del Dialogo aquí
Este es un simple dialogo hecho con jQuery, yeah !!
No olvides dejar tus comentarios 😀