我正在加载到模态对话框中的文件的高度可能不同.打开第一个链接时,对话框的顶部水平居中(意味着对话框的位置太低).关闭它并再次重新打开后,使用相同的编辑按钮或不同的编辑按钮,定位更好.
看起来它总是落后一步：第一次加载它无法分辨正在加载的文件的宽度/高度,然后在同一文件的后续加载中,它完美定位.
我使用以下代码作为数据表的模态编辑：
$(".editMe").button({
icons: {
primary: 'ui-icon-document'
},text: false
}).click(function () {
var eventLink = $(this).attr("name");
var dialogopts = {
title: "Make Modifications or Delete This Event",modal: true,autoOpen: false,height: "auto",width: "auto",open: function () {
//The height of the file below can vary,and in the
//JS Bin environment the dialog loads just fine blank
$("#modify").load("themes_edit.asp?id=" + eventLink);
},close: function () {
oTable.fnDraw();
}
};
$("#modify").dialog(dialogopts).dialog("open");
return false;
});
这里有一些示例HTML(尽管加载到#modify中的文件不是实时的).我也把它设置在JS Bin.
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button class="editMe" name="2810">edit</button>
<button class="editMe" name="2811">edit</button>
<button class="editMe" name="2812">edit</button>
<button class="editMe" name="2813">edit</button>
<div id="modify"></div>
</body>
</html>
解决方法
“落后一步”将是因为在对话框打开事件中,您尝试加载数据.因此,当对话框显示它将显示旧内容,然后突然显示新内容.
解决此问题的一种方法是打开对话框,但首先清除现有内容并在等待ajax调用响应数据时显示加载gif,然后将数据加载到对话框中.
N.B如果您在对话框调整大小时担心屏幕抖动,那么您可以将ajax响应放入屏幕上定位的div然后获取尺寸,然后在淡入新内容时很好地调整对话框的大小.
var dialogopts = { title: "Make Modifications or Delete This Event",close: function () { oTable.fnDraw(); } }; var $editDialog = $('#modify').dialog(dialogopts); $(".editMe").button({ icons: { primary: 'ui-icon-document' },text: false }).click(function () { var eventLink = $(this).attr("name"); //clear existing dialog content and show an ajax loader $editDialog.html('<div class="loading" />'); //show the dialog $editDialog.dialog("open"); //get dynamic content and load it into the dialog and resize $.get("themes_edit.asp?id=" + eventLink,function(response){ //fade out ajax loader $editDialog.find('div.loading').fadeOut(500,function(){ $editDialog.html( response ) .dialog('option','position','center'); }); }); return false; });
