jquery ui dialog ui-widget-overlay 高度问题答案

【问题标题】：jquery ui dialog ui-widget-overlay height problemjquery ui dialog ui-widget-overlay 高度问题
【发布时间】：2011-08-23 09:14:20
【问题描述】：

我正在开发一个 Facebook 应用程序。

在这个应用程序中，我使用 jquery ui 对话框来显示 div 内容（来自 ajax 响应）。

打开的对话框完美地显示了从 ajax 调用返回的内容。但是发生了一些奇怪的行为。页面（似乎是我在 fb iframe 中调用的应用程序）不断刷新，就好像它在永久发布一些数据一样。更重要的是，由 ui 对话框动态生成的 “ui-widget-overlay”div 的高度，不断增加，似乎永远不会稳定。可能这两种奇怪的行为有某种联系。想不通。

因此，即使我在对话框中使用“modal : true”属性，我也可以访问对话框后面的整个页面。

我的代码的 sn-p：

$.ajax({

            type : "POST",
            data : "id=1",
            url : site_url + "lists/add_new",
            success : function(response) {
                $('#new_box').html(response);

                $('#new_box').dialog({                  
                    modal: true,
                    position: 'top'
                });
                $('#new_box').dialog( "open" );
                return false;               
            },
            error   : function(XMLHttpRequest, textStatus, errorThrown) {               
                alert(textStatus);
            }

        });

请指导。

谢谢

更新：

看来我找到了罪魁祸首：

将“modal”属性设置为“true”会导致覆盖层（对话框和文档之间的透明div）的大小不断调整，以获取文档的宽度和高度，通过在Chrome中调试对话框js，我发现它正在增加永远。不知道是什么导致发生了什么：|

现在，当我将“modal”设置为“false”时，一切正常，因为不再有“覆盖”，但当然现在我必须找到一些解决方案来“禁用”我的文档。

任何线索如何使用“模态”属性作为“真”？

谢谢

【问题讨论】：

忘记 ajax 调用，即使只是显示 div 的静态内容也会导致相同的“持续刷新”和“持续高度增加”问题

标签： jquery user-interface modal-dialog

【解决方案1】：

您正在尝试在 ajax 调用上初始化一个对话框，因此每次 Jquery 都会初始化一个新对话框。请试试这个：

onload 初始化对话框。

$(function(){
$('#new_box').dialog({                  
                    modal: true,
                    position: 'top'
                });
});

在您的 ajax 调用中，只需使用 open 调用对话框。

$.ajax({

            type : "POST",
            data : "id=1",
            url : site_url + "lists/add_new",
            success : function(response) {
                $('#new_box').html(response);

                $('#new_box').dialog( "open" );
                return false;               
            },
            error   : function(XMLHttpRequest, textStatus, errorThrown) {               
                alert(textStatus);
            }

        });

HTH

【讨论】：

我也已经尝试过这个了..不起作用，同样的问题..还是感谢您的尝试..

【解决方案2】：

就即使使用模态模式访问后面的页面而言，由于您在 iframe 中，因此用于捕获事件的 div 不会扩展到您的 iFrame 之外。这有充分的理由，但在我们（FB 应用程序开发人员）需要合法地这样做的情况下，这很烦人。

现在，如果模态没有使您的页面处于 iFrame 模态，那就是另外一回事了。

【讨论】：

【解决方案3】：

我遇到了同样的问题，我修复它的方法是在对话框出现后使用 jquery 添加内联样式：

$('.ui-widget-overlay').attr('style', 'height: 1001px !important; z-index: 1001;');

我发现 !important 是它工作所必需的。由于这种插入方法，这行代码确实替换了发送到浏览器的 jquery ui-widget-overlay 内联样式。我发现这一点很困难，因为我最初没有放入 z-index，所以它使对话框顶部的覆盖层，这使得对话框无法点击。因此，简而言之，您可能不得不摆弄 z-index 值。

【讨论】：