Question

我在.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');

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

我很感激有关此事的任何帮助。

的Si。

Answer 1

这是未经测试的，但是我会在这些线上形象，会让你到达你想去的地方???

$.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');
}

Answer 2

非常感谢David Lloyd Brookes的回复;这是我需要在这里得到这个代码的跳板：

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

仍有一个不幸的问题，但这只是明确适用于设置它的按钮，而不是（例如）'X'关闭按钮或转义键。我会投票，但我认为你没有回答我的问题......甚至可能没有答案:(

Answer 3

我决定运行它并测试它，这里是你需要的代码，它也很顺畅：

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

</script>

Answer 4

这是另一种方法。 dialogue函数可以采用hide属性，该属性接受以下http://api.jqueryui.com/dialog/#option-hide

您可以传递effect hide，然后将delay的{{1}}设置为完整，例如，保持大部分原始功能不变。

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

4 个答案: