0

我有以下代码，其中运行在.in和.out类上的 CSS 动画。我的问题是对话框立即关闭，您根本看不到关闭动画。所以在关闭对话框之前我需要约 500 毫秒的延迟；

$.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')函数，但这只是运行一个无限循环，手动隐藏对话框似乎是浪费代码（更不用说对话框的覆盖层也需要删除）

对于此事，我将不胜感激。

矽。

4

4 回答 4

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');
}
于 2012-11-25T13:43:45.530 回答
0

非常感谢大卫·劳埃德·布鲁克斯的回复；这是我在这里获取此代码所需的跳板：

// 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”关闭按钮或退出键。我会投票，但我认为你没有回答我的问题......甚至可能没有答案:(

于 2012-11-25T19:07:20.490 回答
0

我决定运行它并对其进行测试，这是您需要的代码，它也更流畅：

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

</script>
于 2012-11-26T20:02:16.787 回答
0

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

您可以通过effect hide然后设置 a delayof 500，保持大部分原始功能不变，例如。

$confirm.dialog({
    hide: {
        effect: 'hide',
        delay: 500
    },
    // etc...
});
于 2019-06-18T11:53:20.723 回答