14 de octubre de 2009

jQuery UI – Dialog, Mostrar un Dialog Modal

jQuery UI Dialog Modal, Demo, Ejemplo, Ventana Flotante

En este artículo veremos un ejemplo de como mostrar un dialogo, modal o no, usando el control Dialog de jQuery UI.

Veremos además una demo que podrás descargarte y ver en el código fuente.

Hoy hablaremos de la colección de componentes jQuery UI, y en particular del control Dialog. En esta biblioteca de componentes basada en jQuery podremos encontrar interesantísimos efectos visuales para la creación de aplicaciones web.

jQuery UI, Dialog Modal

Pero como siempre veamos el componente (jQueryUI Dialog Modal) a través de un ejemplo. Implementemos una sencilla pagina web que contenga un botón y que al pulsarlo se muestre un Dialog Modal, apagando el resto de la web para ganar mas protagonismo.

En el código de solución que está mas abajo veremos lo siguiente:

1. Lo primero será hacer referencia a la hoja de estilo css y a los js (jQuery y jQuery UI)

2. Definir el componente Dialog.

3. Definir la función MostrarDialog(), que será lanzada al hacer clic en el botón.

4. Definir el botón que abrirá el dialogo y el contenido a mostrar.

5. Y por ultimo la función javascript asociada al botón.

Ver demo de jQueryUI Dialog Modal

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQueryUI Dialog Demo</title>
 
  <link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/1.7/themes/redmond/jquery-ui.css" rel="stylesheet" />
 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
      
  <script type="text/javascript">
    $(function() {        
        $('#dialog').dialog({
            autoOpen: false,
            width: 300
        });
    });
 
    function MostrarDialog() {
      $('#dialog').dialog('option', 'modal', true).dialog('open');
     
      return true;
    }      
  </script>
   
  <style type="text/css">
       body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
  </style>
</head>
<body>
  <div>
     <input id="btnMostrar" type="button" value="Mostrar Dialog Modal" onclick="MostrarDialog()" />
  </div>
 
  <!-- El dialogo que se mostrara -->
  <div id="dialog" title="Titulo del Dialog">
       <p>Contenido del dialog UI.</p>
  </div>
</body>
</html

Al ejecutar este código de ejemplo, el resultado sería el siguiente:

jQueryUI Dialog Modal, jQuery UI Dialog Modal, Ventana Flotante, Demo, Example, Ejemplo Hasta aquí el ejemplo de uso de jQuery UI, Dialog Modal. Este control es altamente configurable, te invito a que visites la pagina oficial para ver el resto de las opciones. El objetivo de este post es iniciarte en esta interesante biblioteca de componentes.

Si deseas conocer como resolver un ejemplo similar pero utilizando otro componente, visita el enlace JQuery Tools Overlay.

 

Una idea práctica de uso de este componente es remplazar el usadísimo alert() de javascript por un dialog modal o ventana flotante mucho más elegante. Para lograrlo basta con crearse una función MostrarMensajeModal() y un pequeño código en cada una de las páginas. Más adelante escribiré un articulo sobre este objetivo en concreto. Si deseas ver un artículo concreto de como lograrlo, visita este enlace jQueryUI Dialog Modal (alert() o Div Flotante).

 

Artículos Relacionados:

4 comentarios:

  1. excelente
    algun ejemplo de como insertar datos en tabla de sql server??

    ResponderEliminar
  2. function guardar(){
    var Enviando = new Object();
    Enviando.sNombre=$('#sNombre').val();

    $.ajax({
    type:'post',
    data:Enviando,
    url:'index.php?controlador=Versiones&accion=m_grabaVersiones',
    success: function (respuestaPHP){
    alert(respuestaPHP);
    consulta();

    }
    });//fin ajax
    }

    ResponderEliminar
  3. http://www.esasp.net/2009/10/jqgrid-con-aspnet-y-ajax.html, me ha parecido interesante este link pero el codigo fuente no esta, me lo podrias pasar por favor o volver a publicar en un repositorio?

    atee. Erick,
    saludos desde Chiclayo, Perú

    ResponderEliminar