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 - 如何挂钩对话框关闭事件