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:

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).
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.

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

回答2:

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

回答3:

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

来源：https://stackoverflow.com/questions/9093486/dynamically-choosing-the-close-effect-on-a-jquery-ui-dialog

标签

javascript

jquery

jquery-ui

jquery-ui-dialog