jQuery Thickbox o similar para mostrar iFrame?

Question

He estado buscando en 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 debe mostrarlo en el cuadro de 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

Uso jqModal y funciona muy bien y es liviano. Aquí es cómo conseguir que funcione con un iFrame

Ésta 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 de diálogo de jQueryUI que utiliza un marco flotante, ya que es la base ver ... 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 se presentan los detalles de mi dosis. 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, he cambiado la anchura y altura que ser 100% (no px) y luego se cambió el FIX para jQueryUI 1.7 para ser 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(); });