Question

我正在使用此对话框：

$("#myDialog").dialog({
    hide: {effect: "fade", duration: 3000},
    buttons: {
        Save: function() {
            $.post(someurl, function() {
                $("#myDialog").dialog( "close" );
            });
        },
        Cancel: function() {
            $("#myDialog").dialog( "close" );
        }
    }
});

我有两个在语义上不同的近似行为：

成功后关闭 - 在这种情况下，我想慢慢淡出对话框（我还显示一个绿色的Vee图标，未在上面的代码片段中显示）。
取消后关闭 - 我想立即让对话框消失，淡入淡出效果不适合IMO。

上述代码在两种情况下都使用.dialog("close")，因此当然两种情况都会产生相同的淡出效果。

在第二种情况下实现即时关闭的最佳方法是什么，同时在第一种情况下保持缓慢淡出？

编辑：我还想点击ESCAPE以获得与取消按钮完全相同的效果 - 即时淡出。

Answer 1

最简单的方法是：

$("#myDialog").dialog({
    hide: null,
    buttons: {
        Save: function() {
            $("#myDialog").dialog("option", "hide", "fade").dialog("close");
        },
        Cancel: function() {
            $("#myDialog").dialog("close");
        }
    },
    close: function(e) {
        $("#myDialog").dialog("option", "hide", null);
    }
});

Answer 2

只需在两种情况下设置隐藏选项：

$("#myDialog").dialog({
    buttons: {
        Save: function() {
            $("#myDialog").dialog("option", "hide", "fade").dialog("close");
        },
        Cancel: function() {
            $("#myDialog").dialog("option", "hide", null).dialog("close");
        }
    },
    beforeClose: function(event, ui) {
        if (event.which === 27) {
            $("#dialog").dialog("option", "hide", false);
        }
    }
});

<强> DEMO

Answer 3

对于您的“成功后关闭”案例，您可以发出 $（ 'UI-对话框'）淡出（5000）;

这是我使用上述内容的方式：

$('input').keypress(function () {
    if ($(this).val() === "") { //works on 1st char you type
        $('.ui-dialog').fadeOut(5000); 
    }
});

此外，您不需要打开，而是需要： myDlg.dialog（ '关闭'）对话框（ '开放'）;

动态选择jquery-ui对话框的关闭效果

3 个答案: