Question

我一直在寻找jQUery thickbox来显示带图像的模态对话框，这很棒。但现在我需要以类似的方式显示包含iFrame的隐藏内容div，并带有打开内容的链接。所以我会有这样的事情。

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

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

需要在对话框中显示它。有可能吗？

Answer 1

Thickbox支持。请参阅http://jquery.com/demo/thickbox/

上的内联内容演示

Answer 2

我使用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();
}

Answer 3

我对jQueryUI的对话框有一个扩展，它使用iFrame作为它的基本视图...它调整了一些默认值（比如添加一个OK / Cancel按钮），但应该是你需要的一个不错的基础。我知道这是一个老问题，但只是想让人们意识到这一点。

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

Answer 4

以下是我的修复程序的详细信息。希望您可以将这些更改集成到您的JQuery插件中。我正在使用jquery 1.4.2和jquery UI 1.8.2。

在jquery-frameddialog.js中，我将宽度和高度更改为100％（而非px），然后将jQueryUI 1.7的FIX更改为以下内容：

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

jQuery Thickbox或类似于显示iFrame？

4 个答案: