Question

I’m using this dialog:

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

I have two close actions that are different semantically:

1. Close after success – in this case I want to slowly fade out the dialog (I’m also displaying a green Vee icon, not shown in the above code snippet).
2. Close after cancel – I would like to immediately make the dialog disappear, the fade effect doesn’t fit here IMO.

The above code just uses .dialog("close") in both cases, so of course both cases get the same fade out effect.

What’s the best way to achieve instant close on the second case, while retaining the slow fadeout in the first?

Edit: I also want clicking ESCAPE to have the exact same effect as the Cancel button – instant fade out.

Answer 1

The simplest way to do it is:

$("#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);
    }
});