Usando JQuery Dialog con IFrame

3 Mayo 2010 por Juan Eladio Sánchez Rosas Deja una respuesta »

JQuery es una excelente librería JavaScript que simplifica la manipulación del DOM (Document Object Model) de una página HTML, el manejo de eventos, animaciones y AJAX. Así también, desde hace un tiempo atrás provee una librería de componentes UI que extiende los componentes iniciales de esta librería.

El widget de tipo diálogo es un ventana flotante que tiene un título y contenido (similar a un popup). Este widget resulta ser muy útil para mostrar alertas o formularios que el usuario debe llenar antes de poder continuar. Veamos como lograr lanzar un dialog apenas carga la página

<script type="text/javascript" src="/assets/javascript/jquery-1.4.min.js"></script>
<script type="text/javascript" src="/assets/javascript/jquery-ui-1.8.custom.min.js"></script>
 
<script type="text/javascript">
 
$(function() {
 $("#dialog").dialog();
});
 
</script>
 
<div id="dialog" title="Basic dialog">
        <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

Ejemplo tomado de la página web de Jquery

Como puede apreciarse en el código anterior, esta es una solución muy sencilla para hacer un widget dialog; sin embargo, cuando se desarrolla un sistema de mayor complejidad lo ideal es separar las ventanas en múltiples archivos y los diálogos no son la excepción. Una implementación bastante difundida en la web es utilizar un elemento iframe en vez de una etiqueta div para construir el contenido del diálogo. Veamos un ejemplo para que quede más clara la idea.

<script type="text/javascript">
 
$(function() {
        $('a.showPopup').click(function(e) {
            e.preventDefault();
            var $this = $(this);
            var horizontalPadding = 15;
            var verticalPadding = 15;
            $('<iframe id="site" src="' + this.href + '" />').dialog({
                title: ($this.attr('title')) ? $this.attr('title') : 'Site',
                autoOpen: true,
                width: 600,
                height: 300,
                modal: true,
                resizable: false,
                autoResize: true,
                overlay: {
                    opacity: 0.5,
                    background: "black"
                }
            }).width(600 - horizontalPadding).height(300 - verticalPadding);
        });
});
 
</script>
 
<a class="showPopup" href="http://www.google.com" title="Google">

Como puede apreciarse en el ejemplo anterior, se utiliza un pseudo iframe, al cual le asignamos la dirección con el contenido que queremos mostrar en el diálogo. Algunas posibles mejoras a esta idea inicial sería crear una función que permita reutilizar el código en otros enlaces, pero eso se los dejo como tarea.

EDIT:
Respondiendo aun pregunta realizada por un lector estoy agregando una manera de cerrar el diálogo desde el iframe mismo:

<script type="text/javascript">
var refDialog;
$(function() {
...
refDialog = $('<iframe id="site" src="' + this.href + '" />').dialog(...);
...
});
</script>

Dentro del iFrame colocar un link de la siguiente manera:

<a href="javascript:void(0);" onclick="window.parent.refDialog.dialog('close');">close</a>

No related posts.

17 comentarios

  1. Lucio dice:

    Buenas, quiero saber si existe algun metodo para ocultar #showPopup desde el mismo frame?

  2. Hola Lucio

    Para poder hacer eso hay 2 maneras, 1 es crear una libreria que maneje las instancias de los dialogs, de esa manera puedes pedirle a esa libreria que cierre el dialog por ti.

    La segunda manera que es un poco más rústica es obtener la referencia del dialog, y luego utilizar un window.parent.refDialog.dialog(‘close’); desde el iframe. Por favor ve el post, lo he actualizado con el ejemeplo.

  3. roy dice:

    Buen post. Aunque en lo personal los temas de tamaño, dimensiones y estilos los movería al CSS, en lugar de especificarlos en la invocación del método.

    Si le das click varias veces al link crearias varias veces varios dialogos, quiza guardar una referencia y verificar si ya existe un dialogo creado pueda ser una mejor opcion.

    Yo tengo dentro de mis utilitarios un método que encapsula ese tipo de logica, para no tener que lidiar con los problemas arriba descritos.

    me es mas simple invocar

    $.showDialog(url, opts);

    que estar controlando si ya tenia un dialogo creado.

    Saludos!

  4. Walter dice:

    Giancarlo excelente post!!! Una consulta adicional; tengo un iframe que hace referencia a otra pagina web externa. Esta página web al momento de ser llamada por el iframe hace un submit o reload y se convierte en un popup. Existe alguna forma de evitar que el contenido que estoy cargando en un iframe realice un submit o reload para impedir que se convierta en un popup?

    Muy agradecido. Saludos!

  5. Bueno, no se si te entendido bien, pero lo que quieres decir que la página interna hace un submit y por lo tanto el resultado se sigue viendo en el popup cuando lo que tu quieres es que cuando se haga el submit este cierre el popup?

    Si no estas trabajando con ajax, entonces tendrías que tener alguna manera de saber que hiciste submit (probablemente una variable o algo) que consultes en el evento onload para que cierres el popup en base a eso.

    Si estas usando ajax, entonces puedes hacerlo la función que se llama después que retorna del evento ajax.

  6. LOD_Fredy dice:

    Disculpa.

    He estado probando tus codigos y me parecen buenos para hacer tus propias ventanas de dialogo sin embargo les faltan algunas cosas que necesito que necesito y no se como hacer (no se mucho js, menos jquery).

    Quisiera saber como hago para que abierta la ventana de dialogo, quede inhabilitado lo que este debajo (por ejemplo links), solo cerrando el dialog sea posible seguir navegando en la misma pagina.
    Como agrero un fondo negro o gris con transparencia que ocupe toda la ventana de la pagina (mas no la del dialog)?, esto para hacer algo estilo colorbox y esas cosas.
    Por ultimo y lo menos importante, como hago para que el dialog siempre este en el centro aunque usen el scroll para moverse hacia arriba o abajo de la pagina?

    Otra cosa, no puedo aumentar el tamaño del iframe desde jquery, en vez de eso, se mueve de lugar quedando fuera del centro.

    Gracias y disculpa la molestia.

  7. Hola LOD_Fredy,

    Respecto a tu primera pregunta dado que este es un Jquery Dialog tienes que ver la opciones que este te provee. La opcion modal:true agrega una ventana opaca en la parte de atras.

    http://jqueryui.com/demos/dialog/#modal

    Por defecto me parece que dialog box se centra, sino puedes ver las opciones del mismo en la web de Jquery.

    Sobre agrandar el dialog pues el iframe como el dialog tienen que coincidir en tamaños para que este no salga fuera de lugar

  8. Luis Alva dice:

    Hola amigo, gracias por los tutoriales que tanto nos ayuda a quienes como yo no somos tan duchos en programacion.

    Necesito tu ayuda, es que estuve probando tu codigo y funciona excelente con excepcion de internet explorer 6, porfa si hay una forma de que funcione en internet explorer 6, seria fantastico, de antemano gracias por tu ayuda.

  9. Lucho dice:

    Una consulta, como haria para enviarle los parametros en la URL, estoy tratando de enviarlos, pero me da un error.
    saludos,

  10. udcoe dice:

    Buenas tarde mi problema es el siguiente:
    eh estado desarrollado un editor de texto sencillo para una aplicación web. el problema radica en que necesito mandar a llamar el editor de una manera asincrona de esa manera si uso un iframe para el editor el editor no se pone en modo editable aun si uso JQuery y $(document),ready o $(‘editor’).ready y poner el designMode= on
    ahora si uso un div el editor funciona correctamente con la execpción de que si doy click en alguna parte de la barra de herramientas la selección se borra y no permite ejecutar algunos comandos como cambiar color.
    eh estado buscando en internet y no hay mucha ayuda espero que alguien ya tenga esta experiencia y pueda ayudarme.. Gracias

  11. Owen dice:

    Buenas,
    He trabajo antes con iframe, y siguiendo la logica, no me esta haciendo caso al ancho y al alto. Alguna sugerencia.

  12. Owen dice:

    Bien, encontre la solución:
    seria asi :

    $(”).dialog({ … });

    de esta manera se auto ajusta.

    Saludos

  13. Owen dice:

    nose porque no se guardo en el comentario anterior:
    ¿?

    var $dialog = $(”);

  14. Owen dice:

    Por tercera vez, escribo, la solución

    var $dialog = $(”);

    PD:
    Se que hay un error de sintaxis, pero no me deja guardar al poner comillas.

  15. Owen dice:

    Por alguna estraña razon, no me deja grabar, lo que contiene dentro de los apostrofes.
    asi que lo indicare simplemente.

    Es decir dentro de la etiqueta va la etiqueta .

  16. Owen dice:

    Por alguna estraña razon, no me deja grabar, lo que contiene dentro de los apostrofes, etiquetas, (la quinta vez)
    asi que lo indicare textualmente.

    [div][iframe width=100% height=100%][iframe][/div]

    Es decir dentro de la etiqueta [div] va la etiqueta [iframe].

  17. Ana dice:

    Hola buenos días, no consigo centrar mi dialog. en ningún navegador.
    utilizo este comando

    jQuery(“#dialogAYUDA”).position({my: “center”,at: “center”, of: window});

    lo escribo sin comillas por si acaso no lo pilla
    jQuery(‘#dialogAYUDA’).position({my: ‘center’,at: ‘center’, of: window});

    me sale siempre arriba a la izda.
    ¿Podrías ayudarme ?

Deja un comentario