jQuery Thickbox oder ähnliche iFrame zeigen?

Question

Ich habe unter VisualLightBox zeigt modale Dialoge mit Bildern, ist es großartig. Aber jetzt habe ich das Bedürfnis, eine versteckte div von Inhalten angezeigt werden, die einen iFrame in ähnlicher Weise enthält, mit einem Link, den Inhalt zu öffnen. Also würde ich so etwas wie dieses haben.

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

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

Und müssen sie im Dialog zeigen. Ist es möglich?

Answer 1

Thickbox unterstützt das. Siehe Inline-Inhalt Demo unter http://jquery.com/demo/thickbox/

Answer 2

Ich benutze jqModal und es funktioniert gut und ist leicht. Hier ist, wie ich es mit einem iFrame arbeiten

Dies ist html

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

Und der Angerufene Code

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

Ich habe eine Erweiterung jQueryUI des Dialogs, der einen iFrame verwendet, wie es Basisansicht ist ... es passt ein paar Standardwerte (wie ein OK Hinzufügen / Abbrechen-Taste) sollte aber eine anständige Basis für das sein, was Sie brauchen. Ich weiß, dass dies eine alte Frage, aber will nur die Menschen bewusst machen.

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

Answer 4

Im Folgenden sind die Details meiner fix. Hoffentlich können Sie diese Änderungen in Ihre JQuery-Plugin integrieren. Ich bin mit jquery 1.4.2 und jQuery UI 1.8.2.

In jquery-frameddialog.js, änderte ich die Breite und Höhe 100% (nicht px) zu sein, und wechselte dann das Update für jQueryUI 1,7 bis die stattdessen folgende sein:

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