Динамический выбор эффекта закрытия в диалоге jquery-ui

Question

Я использую этот диалог:

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

У меня есть два близких действия, которые семантически различаются:

1. Закрыть после успеха - в этом случае я хочу постепенно затухать в диалоговом окне (я также отображаю зеленый значок Vee, не показанный в приведенном выше фрагменте кода).
2. Закрыть после отмены - я хотел бы немедленно сделать так, чтобы диалоговое окно исчезло, эффект затухания здесь не подходит 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-dialog'). FadeOut (5000);

Вот как я использовал выше:

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

Кроме того, вместо простого открытия вам понадобятся: myDlg.dialog ('close'). Dialog ('open');