jQuery UI 模态对话框遮罩淡出效果

Question

是否可以在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();
    }
});

- Alex Jorgenson

---

beforeclose 中的淡出效果是否有效？ - Kevin Stricker

Answer 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;
        });
    }
});

​

- Danil Speransky

---

我fork了你的Fiddler并添加了背景颜色，但是覆盖还是没有消失。我在我的网站上也试过了，但没有成功。编辑：更正的Fiddler链接：http://jsfiddle.net/276Ft/ - Alex Jorgenson

这太棒了，接近完美！请更新您上面的答案，我会标记为正确。非常感谢！ - Alex Jorgenson

@speranksy，非常感谢！事情进展得很顺利。我有一些空闲时间，所以我查看了jQuery UI源代码，并创建了一种实现此目的的hacky方法。这种新方法是一种hack，它需要使用自己的覆盖层（当然要使用jQuery UI）。两个区别在于，这个新版本将同时播放两个动画，因此遮罩层和对话框框消失的时间相同。这也处理了对话框框可以通过任何方式关闭而不仅仅是单击关闭按钮的情况。这是fiddle：http://jsfiddle.net/TtTrN/。 - Alex Jorgenson

Answer 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
        }
    }
});

- Takit Isy