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.

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.

• javascript
• jquery
• jquery-ui
• jquery-ui-dialog

3 Answers 3

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

Just set the hide option in both case:

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

For your "Close after success" case you could just issue $('.ui-dialog').fadeOut(5000);

This is how I used the above:

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

Also, instead of just open, you'd need: myDlg.dialog('close').dialog('open');