2 de febrero de 2012

jQueryUI. Cargar pagina en Dialogo Modal con jQuery UI

Este pequeño post es para mostrar una solución simple de como mostrar el contenido de una pagina (o parte de ella) en un dialogo modal.

Imaginemos que tenemos una pagina Page1 y otra Page2, y que estando en Page1 queremos ver el contenido de Page2, pero sin salir de Page1. Una posible solución es abrir una nueva ventana y asunto resuelto, pero nuestro objetivo es abrir dicho contenido como un dialogo modal propio de Page1, además, puede que no necesites mostrar la Page2 completa, sino solo una parte de ella.

En nuestro ejemplo usaremos la misma pagina (por simplicidad), o sea, desde Page1, abriremos un dialogo con parte del contenido de Page1, veamos una imagen para hacernos una idea mejor:

image

Como vemos en la imagen, desde nuestro primer formulario (El que aparece en el fondo), hemos abierto un dialogo con el contenido de una URL (en nuestro caso coincide que es la misma pagina) pero solo hemos cargado una parte de la pagina, hemos dejado fuera el ToolBar (Barra de botones).

Para lograrlo usaremos las librerías JavaScript:

  • jQuery
  • jQuery UI

Código de Ejemplo jQuery UI Dialog – Cargar Pagina:

Función JavaScript que carga la página en el dialogo:

function fnLoadPageInDialog(url, contID, titleNewDialog, widthNewDialog, heightNewDialog) {  

       var urlWithCont = url;

       if (contID != '')

             urlWithCont = urlWithCont + ' #' + contID;

                   

       var $dialog = $('<div></div>')

             .load(urlWithCont)

             .dialog({

                    autoOpen: false,

                    title: titleNewDialog,

                    width: widthNewDialog,

                    height: heightNewDialog

             });

 

       $dialog.dialog('open');

}

Ejemplo de llamada a la función JavaScript:

fnLoadPageInDialog('FichaDoc.aspx?op=view&Id=5665', 'divDocInfo', 'Documento Información', 820, 350);

 

 Y así de simple logramos el objetivo.

4 comentarios:

  1. Es posible que pongas el codigo por favor para ver su funcionamiento. Gracias

    ResponderEliminar
  2. Gracias por el aporte y por tu tiempo.

    Realice la prueba con el código que proporcionas, y me muestra la ventana modal, pero no me muestra el contenido de la pagina ASP, aunque no me muestra error,

    Tengo mi proyecto asp con C# y dentro de este tengo los forms dentro de una carpeta que se llama FORMAS, por lo que lo llamo como sigue:

    function mt_EjecutaImprimir() {
    var Str_Forma = "~/Formas/Frm_RepVentas.aspx"; fnLoadPageInDialog(Str_Forma, '', 'Esperemos', 820, 350);

    }

    Espero me puedas ayudar para saber que estoy haciendo mal, de antemano gracias por la molestia.

    ResponderEliminar
  3. Muy buen aporte man me funciono de lugo gracias

    ResponderEliminar