jQuery 显示对话框模态动画在背景变暗时发生

Question

这是我忍受太久的烦恼，最终决定寻求答案。我在我的 Web 应用程序中显示了一个模态 jQuery 对话框，但显示它的动画未按正确的顺序出现。我将单击事件（使用 jQuery）设置为页面上的链接，当用户单击它时，它会创建一个新的对话框，并将 autoOpen 设置为 true。从对话框中取消会销毁它，以便用户可以在下次单击时再次打开它。

无论我使用什么动画（当前使用“盲”），似乎整个页面首先变暗，然后打开对话框（仍然变暗），一旦对话框完全打开，它就会取消变暗。只是没有按正确的顺序发生。有其他人看到过这种情况，或者知道为什么会发生这种情况吗？我用来创建对话框的代码如下：

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');
            }
        }
    });
}

任何帮助将不胜感激。谢谢。

Answer 1

我能够让它在 IE 和 FireFox 中正确显示，其中页面变暗并且对话框动画正确完成（非变暗）。您是否有任何其他 jQuery 脚本可以作用于该

标记？

编辑：我刚刚能够重现这个问题。这似乎是对话框与动画相结合的初始显示的问题。在你的情况下，因为你不断地创建/销毁对话框，所以每次都会出现。您可能想尝试以下操作：

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');
});