jQuery:设置模态对话框叠加颜色

Question

我想使用jquery ui弹出一个模态对话框,其中叠加层是完全黑色的.我知道我可以在主题中设置它,但我不希望所有对话框都有黑色叠加.只是其中之一.

有没有办法在每个对话框的基础上配置对话框的背景(叠加)颜色？也许什么时候创建？

TIA

Answer 1

您可以使用ui对话框的打开和关闭事件.

$("#your-dialog").dialog(
{
    autoOpen: false, 
    modal: true, 
    open: function() {
        $('.ui-widget-overlay').addClass('custom-overlay');
    }          
});

并在CSS中添加所需的样式.例:

.ui-widget-overlay.custom-overlay
{
    background-color: black;
    background-image: none;
    opacity: 0.9;
    z-index: 1040;    
}

Answer 2

overlay元素是对话框小部件的直接兄弟,并公开ui-widget-overlay该类,因此您可以匹配它并在每个对话框的基础上修改背景颜色:

$("#yourDialog").dialog("widget")
                .next(".ui-widget-overlay")
                .css("background", "#f00ba2");

你可以在这个小提琴中看到结果.

Answer 3

JQuery对话框的背景是一个包含"ui-widget-overlay"类的div.您要调整的关键样式是"不透明度","过滤器"和"背景颜色"("不透明度"和"过滤器"是为不同浏览器设置不透明度的两种不同方式.)您可以调整类定义或在对话框定义中执行以下操作:

$("div#MyDialog").dialog({
    title: "My Dialog Title",
    open: function (event, ui) {
        $(".ui-widget-overlay").css({
            opacity: 1.0,
            filter: "Alpha(Opacity=100)",
            backgroundColor: "black"
        });
    },
    modal: true
});

Answer 4

Frederic 的回答非常接近，但它给我留下了一个问题：我在该页面上有多个对话框，在我更改了一个对话框的覆盖层后，它更改了所有对话框，直到重新加载页面。不过，它确实给了我一个想法；

首先，我将默认值存储到变量（页面范围）中，然后设置我的自定义样式。

var overlay = $(".ui-widget-overlay");
baseBackground = overlay.css("background");
baseOpacity = overlay.css("opacity");
overlay.css("background", "#000").css("opacity", "1");

然后，当对话框关闭时，我恢复了这些值。

$(".ui-widget-overlay").css("background", baseBackground).css("opacity", baseOpacity);

将它们存储在变量中（而不是将它们重置为显式值）的主要原因是为了可维护性。这样，即使site.css发生变化，它也会起作用。

感谢您的帮助！