在模态对话框中淡入叠加

Question

我有一个JQuery UI对话框,它是模态的,具有50%不透明度的黑色背景.是否可以使背景不透明度从0%降至50%？如果是这样,怎么样？因为目前感觉有点像在显示对话框时直接冲到脸上.

FWIW,这是我目前正在使用的CSS:

.ui-widget-overlay {
    background: black;
    opacity: 0.5;
    filter: alpha(opacity = 50);
    position: absolute;
    top: 0;
    left: 0;
 }

Answer 1

您还可以将此添加到fadeIn模态中:

$(loginForm).dialog({
        resizable: false,
        open: function(){
            $('.ui-widget-overlay').hide().fadeIn();
        },
        show: "fade",
        hide: "fade" 
});

希望这可以帮助 :)

Answer 2

这是Liam Potter答案的扩展.他的作品非常适合淡入淡出,但不会淡出淡出.我发现这是使背景也消失的最简单方法:

beforeClose: function(){
    $('.ui-widget-overlay:first')
        .clone()
        .appendTo('body')
        .show()
        .fadeOut(400, function(){ 
            $(this).remove(); 
        })
    ;
}

你不能在"关闭"方法中执行此操作,因为jQuery已经删除了'.ui-widget-overlay'容器,但是通过克隆它只是做淡化你可以回避它们的删除并仍然使用所有默认值样式.

Answer 3

我知道这是一个古老的问题,但我刚才在搜索中遇到它,觉得我可以帮助其他人.

这可以改进我确定,但是当使用jQuery UI对话框时,这会淡入和淡出你的叠加层.

open: function(){
    $('.ui-widget-overlay').hide().fadeIn();
},
beforeClose: function(){
    $('.ui-widget-overlay').remove();
    $("<div />", {
        'class':'ui-widget-overlay'
    }).css(
        {
            height: $("body").outerHeight(),
            width: $("body").outerWidth(),
            zIndex: 1001
        }
    ).appendTo("body").fadeOut(function(){
        $(this).remove();
    });
}

Answer 4

您可以使用 jQueryfadeTo()函数。更多信息可以在下面的链接中找到。 http://docs.jquery.com/Effects/fadeTo#speedopacitycallback