CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-dialog
ripper234
ripper234

Reputation: 230008

Dynamically choosing the close effect on a jquery-ui-dialog

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.

Upvotes: 2

Views: 3103

Answers (3)

W. Nema
W. Nema

Reputation: 329

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

Upvotes: 0

WTK
WTK

Reputation: 16961

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

Upvotes: 7

Didier Ghys
Didier Ghys

Reputation: 30666

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

Upvotes: 1

Related Questions