jQuery Thickbox ou similar para mostrar iFrame?
-
03-07-2019 - |
Pergunta
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?
Solução
Thickbox suporta isso. Veja conteúdos em linha de demonstração em http://jquery.com/demo/thickbox/
Outras dicas
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();
}
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.
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(); });