我正在使用jQuery UI对话框来加载ajax内容.它正确地垂直定位对话框,然而,宽度:“自动”选项它不会水平居中.它偏离中心,就像中心右侧100px一样.
这是我的代码:
$('.open').live('click',function(e) { e.preventDefault(); $("#modal").load($(this).attr('href')).dialog({ title: $(this).attr('title'),modal: true,autoOpen: true,draggable: false,resizable: false,width: 'auto',position: ['center','top'] }); });
任何想法,如果有办法让它自动调整大小并保持中心?
编辑:这工作:
$("#modal").load($(this).attr('href'),function() { $("#modal").dialog({ title: $(this).attr('title'),150],create: function(event,ui) {} }); });
解决方法
要避免定位问题,您应该在创建或打开对话框之前等待内容加载.除此以外:
> jQuery UI对话框将计算空div的宽度和中心
>当内容加载时,对话框的右侧会拉伸以容纳内容,而左侧保持固定,导致对话框显示向右移动
您的示例代码应更改为:
$("#modal").load("/ajax/content.html",function() { // callback is executed after post-processing and HTML insertion has been performed // this refers to the element on which load method was called $(this).dialog({ modal: true,width: "auto",position: { my: "top",at: "top",of: window } }); });