form - jQuery Thickbox o similar para mostrar iFrame?

modal jquery bootstrap

Question

He estado mirando una caja gruesa 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 necesito mostrarlo en el diálogo. ¿Es posible?

Answer 1

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

Answer 2

Yo uso jqModal y funciona muy bien y es liviano. Aquí es cómo lo hago para trabajar 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 Aceptar / Cancelar) pero debe ser una base decente para lo que necesita. Sé que esta es una vieja pregunta, pero solo quiero que la gente lo sepa.

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

Answer 4

A continuación están los detalles de mi solución. Es de esperar que pueda integrar estos cambios en su plugin de JQuery. Estoy usando jquery 1.4.2 y jquery UI 1.8.2.

En jquery-frameddialog.js, cambié el ancho y alto para que fuera 100% (no px) y luego cambié el FIX para jQueryUI 1.7 para que fuera el siguiente en su lugar:

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