jQuery Thickbox или что-то подобное для show iFrame?

StackOverflow https://stackoverflow.com/questions/210637

  •  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), но должен быть достойной основой для того, что вам нужно.Я знаю, что это старый вопрос, но просто хочу, чтобы люди знали об этом.

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

Ниже приведены подробности моего исправления.Надеюсь, вы сможете интегрировать эти изменения в свой плагин 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(); });
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top