Question

I have the following code with CSS Animations running on the .in and .out classes.
My problem is that the Dialog is closing instantly and you don’t see the close animation happen at all. So I need a delay of ~500ms before closing the dialog;

$.extend( $.ui.dialog.prototype.options, { 
    modal: true, 
    open: function() { 
        $(this).parents('.ui-dialog').removeClass('out').addClass('in'); 
    }
});

$confirm.dialog({

    buttons: {

        "ok": {
            text:'Ok',
            click: function() { $(this).dialog('close'); }
        },

        "cancel": {
            text:'Cancel',
            click: function() { $(this).dialog('close'); }
        }
    },

    beforeClose: function(event, ui) {

        $('.ui-dialog').removeClass('in').addClass('out');

    }

}).dialog('widget').appendTo('.dialogWrapper');

I tried adding return false into the beforeClose, and then manually calling the .dialog('close') function but that just runs an infinite loop, and hiding the dialog manually seems to be wasted code (not to mention the overlay for the dialog would need to be removed, also)

I’d appreciate any help on the matter.

Si.

Answer 1

I decided to run this and test it out, here’s the code you’ll need, it’s a lot slicker too:

<script type="text/javascript">
    function showDialog() {
        $('#myDialog').on("dialogbeforeclose", function (event, ui) { });
        $('#myDialog').dialog({
            beforeClose: function myCloseDialog() {
                alert('Closing Dialog Now...');
            }
        });
    }

</script>