Pau*_*aul 8 jquery jquery-ui modal-dialog
我正在加载到模态对话框中的文件的高度可能不同.打开第一个链接时,对话框的顶部水平居中(意味着对话框的位置太低).关闭它并再次重新打开后,使用相同的编辑按钮或不同的编辑按钮,定位更好.
看起来它总是落后一步:第一次加载它无法分辨正在加载的文件的宽度/高度,然后在同一文件的后续加载中,它完美定位.
我使用以下代码作为数据表的模态编辑:
$(".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>
?
加载内容后,您可以触发重新居中(因此您知道大小),如下所示:
var dialogOpts = {
title: "Make Modifications or Delete This Event",
modal: true,
autoOpen: false,
height: "auto",
width: "auto",
open: function () {
$("#modify").load("themes_edit.asp?id=" + eventLink, function() {
$(this).dialog('option', 'position', 'center');
});
},
close: function () {
oTable.fnDraw();
}
};
这只是使用回调.load()并设置position选项,它会在适当的时间触发重新中心...一旦你知道正确的大小是什么.
作为旁注,既然您正在创建然后打开对话框,则可以删除autoOpen: false,属性.dialog("open"),并且默认行为是立即打开:)
“落后一步”是因为在对话框打开事件中您尝试加载数据。因此，当对话框显示时，它将显示旧内容，然后突然出现新内容。
解决此问题的一种方法是打开对话框，但首先清除现有内容并显示加载 gif，同时等待 ajax 调用响应数据，然后将数据加载到对话框中。
注意：如果您担心对话框调整大小时屏幕抖动，那么您可以将 ajax 响应放入位于屏幕外的 div 中，然后获取尺寸，然后在淡入新内容的同时很好地设置对话框大小调整的动画。
var dialogOpts = {
title: "Make Modifications or Delete This Event",
modal: true,
autoOpen: false,
height: "auto",
width: "auto",
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;
});
| 归档时间： |
|
| 查看次数： |
6443 次 |
| 最近记录： |