jQuery UI模式对话框覆盖淡出

jQuery UI modal dialog overlay fade out

本文关键字：覆盖 淡出 对话框 模式 UI jQuery      更新时间：2023-09-26

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

演示：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;
        });
    }
});

​

我建议不要将fadeOut覆盖绑定到"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
        }
    }
});
相关文章：