jQuery Thickbox или что-то подобное для show iFrame?
-
03-07-2019 - |
Вопрос
Я смотрел на Толстый ящик jQuery для показа модальных диалогов с изображениями это здорово.Но теперь у меня есть необходимость аналогичным образом отобразить скрытый div содержимого, содержащего iFrame, со ссылкой для открытия содержимого.Так что у меня было бы что-то вроде этого.
<a href="">Open window in Modal Dialog</a>
<div id="myContent">
<h1>Look at me!</h1>
<iframe src="http://www.google.com" />
</div>
И нужно показать это в диалоговом окне.Возможно ли это?
Решение
Thickbox поддерживает это.Смотрите демонстрацию встроенного контента по адресу http://jquery.com/demo/thickbox/
Другие советы
Я использую jqModal, и он работает хорошо и является легким.Вот как я заставляю это работать с iFrame
Это html
<div class="jqmWindow" id="modalDialog">
<iframe frameborder="0" id="jqmContent" src="">
</iframe>
</div>
И вызывающий код
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();
}
У меня есть расширение к диалоговому окну jQueryUI, которое использует iFrame в качестве базового представления...он настраивает несколько значений по умолчанию (например, добавляет кнопку OK / Cancel), но должен быть достойной основой для того, что вам нужно.Я знаю, что это старый вопрос, но просто хочу, чтобы люди знали об этом.
Ниже приведены подробности моего исправления.Надеюсь, вы сможете интегрировать эти изменения в свой плагин jQuery.Я использую jquery 1.4.2 и jquery UI 1.8.2.
В jquery-frameddialog.js Я изменил ширину и высоту на 100% (не в пикселях), а затем изменил ИСПРАВЛЕНИЕ для jQueryUI 1.7 следующим образом:
wrap.bind('dragstart', function() { overlay.show(); })
.bind('dragstop', function() { overlay.hide(); })
.bind('resizestart', function() { overlay.show(); })
.bind('resizestop', function() { overlay.hide(); });