jQuery UI 模态对话框覆盖淡出答案

【问题标题】：jQuery UI modal dialog overlay fade outjQuery UI 模态对话框覆盖淡出
【发布时间】：2012-08-31 03:00:55
【问题描述】：

是否可以在 jQuery UI 模态对话框叠加层上应用淡出效果？问题是当模式对话框关闭时覆盖 div 被破坏，从而阻止了任何类型的动画。如果覆盖 div 在关闭时没有被破坏，这是我的代码。

$("#edit-dialog-box").dialog(
{
    autoOpen: false,
    modal: true,
    width: "30em",
    show: "fade",
    hide: "fade",
    open: function()
    {
        $(".ui-widget-overlay").hide().fadeIn();
    },
    close: function()
    {
        $(".ui-widget-overlay").fadeOut();
    }
});

【问题讨论】：

在beforeclose 中淡出是否有效？

标签： javascript jquery animation overlay modal-dialog

【解决方案1】：

演示：http://jsfiddle.net/276Ft/2/

$('#dialog').dialog({
    autoOpen: true,
    modal: true,

    width: '100px',
    height: '100px',

    show: 'fade',
    hide: 'fade',

    open: function () {
        $('.ui-widget-overlay', this).hide().fadeIn();

        $('.ui-icon-closethick').bind('click.close', function () {
            $('.ui-widget-overlay').fadeOut(function () {
              $('.ui-icon-closethick').unbind('click.close');
              $('.ui-icon-closethick').trigger('click');
            });

            return false;
        });
    }
});

【讨论】：

我分叉了你的提琴手给覆盖层一个背景颜色，覆盖层仍然没有淡出。我也在我的网站上尝试过，但没有成功。编辑：正确的提琴手叉：jsfiddle.net/276Ft
这真是太棒了，而且对我来说已经足够完美了！更新上面的答案，我会将其标记为正确。非常感谢！
@speranksy，非常感谢！事情进展顺利。我有一些空闲时间，所以我通过 jQuery UI 源代码进行了一些窥探，并创建了一种完成此操作的 hacky 方式。这种新方法是一种 hack，它需要制作自己的叠加层（当然使用 jQuery UI）。两个不同之处在于，这个新版本将同时播放两个动画，因此叠加层会在对话框消失的同时消失。这也处理了对话框可以以任何方式关闭的情况，而不仅仅是单击关闭按钮。这是小提琴：jsfiddle.net/TtTrN

【解决方案2】：

我建议不要将叠加层的淡出绑定到“closethick”关闭事件。
此解决方案适用于所有情况，例如，如果您使用“取消”按钮，或者如果对话框在执行其他操作后由于其他按钮而自行关闭：

$('#dialog').dialog({
    autoOpen: true,
    modal: true,

    width: '100px',
    height: '100px',

    show: 'fade',
    hide: 'fade',

    open: function () {
        $('.ui-widget-overlay', this).hide().fadeIn();
    },

    beforeClose: function(event, ui){
        // Wait for the overlay to be faded out to try to close it again
        if($('.ui-widget-overlay').is(":visible")){
            $('.ui-widget-overlay').fadeOut(function(){
                $('.ui-widget-overlay').hide();
                $('.ui-icon-closethick').trigger('click');
            });
            return false; // Avoid closing
        }
    }
});

【讨论】：