jQuery Show Dialog Modal Animation 在背景变暗时发生
•浏览 1
jQuery Show Dialog Modal Animation Happens while Background Dimmed
这是我忍了太久的烦恼，终于决定追寻一个答案。我在我的网络应用程序中显示了一个模态 jQuery 对话框，但显示它的动画没有以正确的顺序出现。我正在为页面上的链接设置一个单击事件(使用 jQuery)，当用户单击它时，它会创建一个新对话框，其中 autoOpen 设置为 true。从对话框中取消会破坏它，以便用户可以在下次单击时再次打开它。
无论我使用什么动画(目前使用"blind")，似乎整个页面先变暗，然后打开对话框(仍然变暗)，一旦对话框完全打开，它就会取消它。只是没有按正确的顺序发生。有没有其他人看到过这个，或者知道为什么会发生这种情况？我用来创建对话框的代码如下：
function setDialogWindows($dialogDiv, $leftList, $rightList, leftArray, rightArray, $htmlItemList) {
$dialogDiv.dialog({
autoOpen: true,
modal: true,
show: 'blind',
hide: 'blind',
width: 600,
resizable: false,
buttons: {
Cancel: function() {
resetDialog($leftList, $rightList);
$(this).dialog('destroy');
},
'Save': function() {
if (saveDialog($leftList, $rightList, leftArray, rightArray, $htmlItemList)) {
showHideItemList("show");
}
else
showHideItemList("hide");
$(this).dialog('destroy');
}
}
});
}function setupDialog($dialogDiv) {
// set autoOpen: false
// within Cancel and Save use .dialog('close')
}
// Define the dialog boxes:
setupDialog($('#dialog1'));
setupDialog($('#dialog2'));
setupDialog($('#dialog3'));
// Show the dialog on button clicks:
$('#button1').click(function() {
$('#dialog1').dialog('open');
});
$('#button2').click(function() {
$('#dialog2').dialog('open');
});
$('#button3').click(function() {
$('#dialog3').dialog('open');
});任何帮助将不胜感激。谢谢。
我能够让它在 IE 和 FireFox 中正确显示，其中页面变暗并且对话动画正确完成(非变暗)。您是否有任何其他作用于该 标记的 jQuery 脚本？
编辑：我只是能够重新创建这个问题。这似乎是对话框的初始显示与动画相结合的问题。在您的情况下，因为您不断创建/销毁对话框，所以每次都会出现。以下是您可能想尝试的内容：
function setDialogWindows($dialogDiv, $leftList, $rightList, leftArray, rightArray, $htmlItemList) {
$dialogDiv.dialog({
autoOpen: true,
modal: true,
show: 'blind',
hide: 'blind',
width: 600,
resizable: false,
buttons: {
Cancel: function() {
resetDialog($leftList, $rightList);
$(this).dialog('destroy');
},
'Save': function() {
if (saveDialog($leftList, $rightList, leftArray, rightArray, $htmlItemList)) {
showHideItemList("show");
}
else
showHideItemList("hide");
$(this).dialog('destroy');
}
}
});
}function setupDialog($dialogDiv) {
// set autoOpen: false
// within Cancel and Save use .dialog('close')
}
// Define the dialog boxes:
setupDialog($('#dialog1'));
setupDialog($('#dialog2'));
setupDialog($('#dialog3'));
// Show the dialog on button clicks:
$('#button1').click(function() {
$('#dialog1').dialog('open');
});
$('#button2').click(function() {
$('#dialog2').dialog('open');
});
$('#button3').click(function() {
$('#dialog3').dialog('open');
});