在jQuery UI对话的beforeClose上延迟关闭事件

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;

我在.in和.out类上运行CSS动画时有以下代码。我的问题是Dialog正在关闭，你根本看不到关闭动画。所以在关闭对话框之前我需要延迟~500ms;

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

我尝试将return false添加到beforeClose中，然后手动调用.dialog（'close'）函数但是只运行一个无限循环，并且手动隐藏对话框似乎是浪费的代码（更不用说对话框的叠加层了）需要删除，也）

I'd appreciate any help on the matter.

我对此事有任何帮助表示感谢。

Si.

硅。

3 个解决方案

#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>

#2

This is untested but I would image something along these lines will get you where you want to be???

这是未经测试的，但我想在这些线上的图像会让你到达你想要的地方???

$.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() { closeDialog(this); }
        },

        "cancel": {
            text:'Cancel',
            click: function() { closeDialog(this); }
        }

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

function closeDialog(element){
        $(element).removeClass('in').addClass('out');
        $(element).delay(500);
        $(element).dialog('close');
}

#3

Thanks so much David Lloyd *es for your reply; it was the springboard I needed to get to this code here:

非常感谢David Lloyd *es的回复;这是我需要在这里获得此代码的跳板：

// function to close dialog using css animations.
$.fn.animateDialogClose = function() {
    var $dialog = $(this);
    $dialog.parents('.ui-dialog').removeClass('in').addClass('out');
    setTimeout( function() { $dialog.dialog('close'); }, 500);
};


$confirm.dialog({
    buttons: {
        "ok": {
            text:'Ok', class:'btn red',
            click: function() {  }
        },
        "cancel": {
            text:'Cancel', class:'btn',
            click: function() { $(this).animateDialogClose(); }
        }
    }

}).dialog('widget').appendTo('.ui-dialog-perspective-wrapper');

There's still the unfortunate problem though that this only applies explicitly to the buttons set to it, and not to (for example) the 'X' close button or the escape key. I'll upvote, but I don't think you've answered my question... there might not even be an answer :(

仍然存在一个不幸的问题，尽管这只会明确地应用于设置它的按钮，而不是（例如）“X”关闭按钮或转义键。我会upvote，但我不认为你已经回答了我的问题...甚至可能没有答案:(

#1