6

我一直在看jQUery 厚盒来显示带有图像的模态对话框，它很棒。但是现在我需要以类似的方式显示包含 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>

并且需要在对话框中显示。是否可以？

4

4 回答 4

7

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

于 2008-10-16T23:31:34.387 回答
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();
}
于 2008-10-16T23:36:22.053 回答
0

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

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

于 2010-06-16T20:30:38.797 回答
0

以下是我修复的详细信息。希望您可以将这些更改集成到您的 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(); });
于 2010-07-22T14:39:10.173 回答