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

Posted

技术标签:

【中文标题】jquery ui dialog ui-widget-overlay 高度问题【英文标题】:jquery ui dialog ui-widget-overlay height problem 【发布时间】: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 的静态内容也会导致相同的“持续刷新”和“持续高度增加”问题 【参考方案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 值。

【讨论】:

以上是关于jquery ui dialog ui-widget-overlay 高度问题的主要内容,如果未能解决你的问题,请参考以下文章

Jquery UI dialog 详解

jquery ui dialog 怎么让弹窗1秒后自动关闭

Jquery UI dialog 弹层被遮住的问题

jquery-ui-dialog - 如何挂钩对话框关闭事件

在Iframe中使用jquery ui dialog 怎么使弹出窗口居于浏览器中间

10 Jquery UI Dialog 对话框插件