jQuery Thickbox o simile per mostrare iFrame?

Question

Ho cercato jQUery thickbox per mostrare dialoghi modali con immagini, è fantastico. Ma ora ho la necessità di visualizzare un div nascosto di contenuto che contiene un iFrame in modo simile, con un link per aprire il contenuto. Quindi avrei qualcosa del genere.

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

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

E devi mostrarlo nella finestra di dialogo. È possibile?

Answer 1

Thickbox lo supporta. Guarda la demo dei contenuti incorporati su http://jquery.com/demo/thickbox/

Answer 2

Uso jqModal e funziona bene ed è leggero. Ecco come faccio a farlo funzionare con un iFrame

Questo è html

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

E il codice chiamante

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

Ho un'estensione della finestra di dialogo di jQueryUI che utilizza un iFrame come vista di base ... regola alcune impostazioni predefinite (come l'aggiunta di un pulsante OK / Annulla) ma dovrebbe essere una base decente per ciò di cui hai bisogno. So che questa è una vecchia domanda, ma voglio solo renderne le persone consapevoli.

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

Answer 4

Di seguito sono riportati i dettagli della mia correzione. Spero che tu possa integrare queste modifiche nel tuo plugin JQuery. Sto usando jquery 1.4.2 e jquery UI 1.8.2.

In jquery-frameddialog.js, ho modificato la larghezza e l'altezza in 100% (non px) e poi ho cambiato il FIX per jQueryUI 1.7 in modo che fosse il seguente:

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