28 de febrero de 2010

jQueryUI Dialogo Modal o Alert (Ventana Flotante)

jQueryUI_thumb En este artículo veremos un ejemplo de como reemplazar la usadísima función alert() de javascript por un dialogo modal, usando el control Dialog de jQuery UI.


En un post que publiqué el año pasado (jQuery UI – Dialog, Mostrar un Dialog Modal), prometí y cito textualmente:

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 artículo sobre este objetivo en concreto.

Pues el objetivo de este artículo es cumplir lo prometido y obtener un resultado como este:

jQueryUI-Dialog-Modal Ventana FlotanteTendremos una página con un botón “Mostrar Dialogo Flotante”, y al hacer click en él, aparecerá una ventana flotante (Dialogo Básico), como la mostrada en la imagen, muy similar al alert de javascript pero con una apariencia mucho más elegante (dialog box).



Ver demo local jQueryUI Dialog Modal

 

Reemplazar alert() por Dialog Modal (Div Flotante)

Últimamente en mi trabajo estamos usando bastante el framework jQuery, y por supuesto también el plugin jQuery UI. Uno de los controles principales de esta biblioteca es el jQuery UI Dialog. Ahora veremos como incorporar un dialogo o ventana flotante en todas nuestras páginas web de una forma simple y rápida.
Pero comentemos cual será la idea:

  1. Lo primero será crear un .js que incluiremos en todas nuestras páginas, este js (Utiles.js) será el que contendrá la función MostrarMensajeModal(mensajeTexto).
  2. Incluir en nuestras páginas la referencia a Utiles.js y la llamada al inicializador PageInit().
  3. Definir una variable global a la página ($dialog) que almacenará el div flotante que mostrará el dialogo jQuery UI con el mensaje.
Pero bien, veamos el código del archivo Utiles.js
//Función donde inicializamos el dialog
function PageInit() {
  $dialog = $('<div></div>')
       .dialog({
         autoOpen: false,
         title: 'Dialogo Básico',
      modal: true
         });
}

//Función que muestra el div flotante con el mensaje
function MostrarMensajeModal(mensajeTexto) {
  $dialog.text(mensajeTexto);
  $dialog.dialog('open');
}
Ahora un ejemplo de lo que tendremos que hacer en cada una de las páginas:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQueryUI Dialog Demo (alert)</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 src="../Scripts/Utiles.js?ver=1" type="text/javascript"></script>

  <script type="text/javascript">
    $(document).ready(function () {
      var $dialog;
      PageInit();
    });   
  </script>

</head>
<body>
  <div>
     <input id="btnDialog" type="button" value="Mostrar Dialog Flotante"
            onclick="MostrarMensajeModal('Mostrar Dialogo Modal Flotante')" />
  </div>
</body>
</html>

Y listo, con esto será muy simple implementar el mostrar mensaje en un dialogo flotante con jQuery UI Dialog.

Nota: Si lo deseamos podemos incluir las 2 funciones contenidas en Utiles.js en la propia página, pero es mejor dejarlo en un .js independiente para su posterior reutilización en otras páginas web.


Artículos Relacionados:

14 comentarios:

  1. orale pues esta chido voy a ver que sale... déjame y le intento y ya luego te dejo un comentario si tuve éxito....

    ResponderEliminar
  2. Si descargo los script a mi maquina no funciona correctamente, marca errores..

    ResponderEliminar
  3. Al descargar el script no se si este dañado o sea el hecho que este en una sola linea jquery-ui.min.js, me marca errores, con el otro script y el stilo no hay problema, funciona desde el equipo

    ResponderEliminar
  4. Muy bueno, pero no me aparece la ventana, solo un texto. tambien necesito que se vea un formulario. que puedo hacer.
    Gracias.

    ResponderEliminar
  5. Esta muy weno, me funciona bien. ahora mi duda es, como hago para mostrar una imagen al costado del texto. ejm:
    si es un mensaje de error, que muestre una imagen "X" y el texto: "error al ejecutar consulta".¿?¿?¿?¿

    ResponderEliminar
  6. Muy bien amigo, pero una pregunta, como cambio el tamañano de letra, cuando yo lo hago sale con letras granes.

    ResponderEliminar
  7. Hola
    Muy bueno el artículo.
    Un par de dudas. Veo que incluyes las librerías disponibles a través de google ¿que pasa sí el usuario está en un entorno de intranet sin acceso a internet?
    Si quiereo modificar por ejemplo la opacidad y el diseño (colores...) ¿como lo hago?
    Gracias de nuevo.

    ResponderEliminar
  8. Muy buen artículo.
    Tengo un problema, me muestra el cuadro peso sin aspa para cerrar. No obstante, al pasar el cursor por el vértice superior dereche se muestra un cuadrado que sirve para cerrar. ¿Como puedeo arreglarlo?

    ResponderEliminar
  9. Hola. Me pasa lo mismo que al ultimo compañero que posteo

    ResponderEliminar
  10. Como puedo poner dentro de un Dialog un select, cosa de que cuando se seleccione un item se pueda de alguna forma recuperar su index y su value por ejemplo.

    ResponderEliminar
  11. hola a todos y desde ya gracias !!

    necesito un popup que me muestre el resultado de una consulta, como lo hago gracias ?

    ResponderEliminar
  12. Hola a todos yo hice lo siguiente para no poner en cada página el código javascript. Cree una clase que tiene un método estático que me genera el javascript y el mensaje.
    Para llamar el método en C# o VB desde una página asp se utilizaría de esta forma.

    VB JavaScriptHandler.MostrarMensajeModal(Page, "Mi Titulo", "Mi Mensaje", Me.GetType)
    C# JavaScriptHandler.MostrarMensajeModal(Page, "Mi Titulo", "Mi Mensaje", this.GetType());


    El código de la clase en VB es el siguiente:

    Public Class JavaScriptHandler
    Public Shared Sub MostrarMensajeModal(Pagina As Page, Titulo As String, Mensaje As String, Tipo As Type)
    Dim MiDiv As HtmlGenericControl = New HtmlGenericControl("Div")
    MiDiv.Attributes.Add("Title", Titulo)
    MiDiv.InnerHtml = Mensaje
    MiDiv.InnerText = Mensaje
    MiDiv.ID = "DivMensajeModal"
    MiDiv.ClientIDMode = ClientIDMode.Static
    Pagina.Controls.Add(MiDiv)
    Dim MiScript As String = _
    "<5cript type='text/javascript'>$(function () {" & vbCrLf & _
    "$('#" & MiDiv.ClientID & "').dialog({" & _
    "autoOpen: true," & _
    "modal: true," & _
    "width: 400," & _
    "height:250" & _
    "});" & _
    "});"
    If Not Pagina.ClientScript.IsClientScriptBlockRegistered("alerta") Then
    Pagina.ClientScript.RegisterClientScriptBlock(Tipo, "alerta", MiScript)
    End If
    End Sub
    End Class

    En el código Anterior fijarse en la etiqueta "5cript" reemplazar el "5" por una "S" toco colocar asi porque me decia etiqueta no permitida.

    ResponderEliminar
    Respuestas
    1. Que tal gracias por tu aporte sin embargo a mi me marca un error: Error en tiempo de ejecución de Microsoft JScript: 'Sys' no está definido

      Eliminar
    2. falta al final de MiScript el cierre de la etiqueta 5script :)

      Eliminar