jQuery Thickbox 或类似的显示 iFrame？答案

【问题标题】：jQuery Thickbox or similar to show iFrame?jQuery Thickbox 或类似的显示 iFrame？
【发布时间】：2008-10-16 23:27:50
【问题描述】：

我一直在查看 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>

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

【问题讨论】：

标签： jquery modal-dialog lightbox

【解决方案1】：

Thickbox 支持这一点。请参阅http://jquery.com/demo/thickbox/ 的内联内容演示

【讨论】：

【解决方案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();
}

【讨论】：

【解决方案3】：

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

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

【讨论】：

我试过这个插件，它隐藏了x-scrollbar。你能解决这个问题吗？ - [查看我的答案]

【解决方案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(); });

【讨论】：