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中的对话框j，我发现增加了永远。不确定导致发生什么的原因：|

现在当我将“模态”设置为“假”时，一切都运行正常，因为没有更多的“叠加”，但当然现在我必须找到一些解决方案来“禁用”我的文档。

有什么线索如何将“模态”属性用作“真”？

感谢

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

Answer 2

即使使用模态模式访问页面，由于您在iframe中，捕获事件的div不会扩展到iFrame之外。这有很好的理由，但是在我们（FB app devs）需要合法地需要这样做的情况下，它会令人恼火。

现在，如果模态没有在iFrame模式中制作您的页面，那就是其他内容。

Answer 3

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

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

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

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

3 个答案: