jQuery Thickbox ou similar para mostrar iFrame?

Question

Eu tenho procurado em jQuery thickbox para mostrar diálogos modais com imagens, é ótimo. Mas agora eu tenho a necessidade de exibir uma div oculta de conteúdo que contém um iFrame de forma semelhante, com um link para abrir o conteúdo. Então eu teria algo como isto.

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

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

E necessidade de mostrá-lo na caixa de diálogo. É possível?

Answer 1

Thickbox suporta isso. Veja conteúdos em linha de demonstração em http://jquery.com/demo/thickbox/

Answer 2

Eu uso jqModal e ele funciona muito bem e é leve. Aqui está como eu obtê-lo para trabalhar com um iFrame

Esta é html

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

E o código de chamada

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

Eu tenho uma extensão de diálogo de jQueryUI que usa um iFrame como é vista base ... ele ajusta alguns padrões (como a adição de um botão OK / Cancelar), mas deve ser uma base razoável para o que você precisa. Eu sei que isto é uma questão de idade, mas apenas querendo fazer as pessoas conscientes disso.

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

Answer 4

A seguir estão os detalhes da minha correção. Esperamos que você pode integrar estas mudanças em seu plugin jQuery. Eu estou usando jQuery 1.4.2 e jQuery UI 1.8.2.

jquery-frameddialog.js, que mudou a largura e altura de ser 100% (não px) e em seguida mudado o FIX para jQueryUI 1,7 a ser o seguinte em vez disso:

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