jQuery Thickbox o similar para mostrar iFrame?

Question

He estado mirando jQUery thickbox para mostrar diálogos modales con imágenes, es genial. Pero ahora tengo la necesidad de mostrar un div oculto de contenido que contiene un iFrame de manera similar, con un enlace para abrir el contenido. Entonces tendría algo como esto.

<a href="">Open window in Modal Dialog</a>

<div id="myContent">
    <h1>Look at me!</h1>
    <iframe src="http://www.google.com" />
</div>

Y necesita mostrarlo en el diálogo. ¿Es posible?

Answer 1

Thickbox lo admite. Consulte la demostración de contenido en línea en http://jquery.com/demo/thickbox/

Answer 2

Uso jqModal y funciona muy bien y es liviano. Así es como lo hago funcionar con un iFrame

Esto es HTML

<div class="jqmWindow" id="modalDialog">  
    <iframe frameborder="0" id="jqmContent" src=""> 
    </iframe>  
</div>

Y el código de llamada

function showModal(url, height, width)
{    
    var dialog = $('#modalDialog')
        .jqm({ 
            onShow: function(h) {
                var $modal = $(h.w);                
                var $modalContent = $("iframe", $modal); 
                $modalContent.html('').attr('src', url); 
                if (height > 0) $modal.height(height);    
                if (width > 0) $modal.width(width);                
                h.w.show();          
            } 
         }).jqmShow();        
}

function closeModal(postback)
{
    $('#modalDialog').jqmHide();
}

Answer 3

Tengo una extensión para el diálogo de jQueryUI que usa un iFrame como vista base ... ajusta algunos valores predeterminados (como agregar un botón OK / Cancelar) pero debería ser una base decente para lo que necesita. Sé que esta es una vieja pregunta, pero solo quiero que la gente se dé cuenta.

http://plugins.jquery.com/project/jquery-framedialog

Answer 4

A continuación están los detalles de mi corrección. Esperemos que pueda integrar estos cambios en su complemento JQuery. Estoy usando jquery 1.4.2 y jquery UI 1.8.2.

En jquery-frameddialog.js, cambié el ancho y la altura para que sea 100% (no px) y luego cambié el FIX para jQueryUI 1.7 para que sea el siguiente:

wrap.bind('dragstart', function() { overlay.show(); })
  .bind('dragstop', function() { overlay.hide(); })
  .bind('resizestart', function() { overlay.show(); })
  .bind('resizestop', function() { overlay.hide(); });