jquery ui 对话框 ui-widget-overlay 高度问题

Question

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

在此应用程序中，我使用 jquery ui 对话框来显示 div 内容(来自 ajax 响应)。

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

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

我的代码片段:

$.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”时，一切都很完美，因为不再有“覆盖”，但当然现在我必须找到一些解决方案来“禁用”后面的文档。

有什么线索我如何使用“modal”属性作为“true”？

谢谢

Answer 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