jQuery Thickbox ou similaire pour montrer iFrame?

Question

J'ai consulté jQUery thickbox pour afficher des dialogues modaux avec des images, c'est génial. Mais maintenant, j'ai le besoin d'afficher un div caché de contenu qui contient un iFrame de la même manière, avec un lien pour ouvrir le contenu. J'aurais donc quelque chose comme ça.

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

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

Et devez l'afficher dans la boîte de dialogue. Est-ce possible?

Answer 1

Thickbox le soutient. Voir la démonstration de contenu en ligne à l'adresse http://jquery.com/demo/thickbox/

.

Answer 2

J'utilise jqModal et cela fonctionne bien et est léger. Voici comment je le fais fonctionner avec un iFrame

Ceci est du HTML

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

Et le code d'appel

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

J'ai une extension dans la boîte de dialogue de jQueryUI qui utilise un iFrame en tant que vue de base ... il ajuste quelques valeurs par défaut (comme l'ajout d'un bouton OK / Annuler), mais devrait constituer une base correcte pour ce dont vous avez besoin. Je sais que c’est une vieille question, mais je veux seulement que les gens en prennent conscience.

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

Answer 4

Vous trouverez ci-dessous les détails de mon correctif. Espérons que vous pourrez intégrer ces modifications dans votre plugin JQuery. J'utilise jquery 1.4.2 et jquery UI 1.8.2.

Dans jquery-frameddialog.js, j’ai modifié la largeur et la hauteur en 100% (et non en px), puis le FIX de jQueryUI 1.7 à la place:

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