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

I would like to pop a modal dialog using jquery ui where the overlay is completely black. I know that I can set this in the theme, but I do not want all dialogs to have a black overlay. Just one of them.

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

Is there a way to configure a dialog's background (overlay) color on a per-dialog basis? Perhaps when it is created?

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

TIA

5 个解决方案

#1

You can use the open and close events of the ui-dialog.

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

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

And add the required styling in the CSS. Example:

并在CSS中添加所需的样式。例：

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

#2

The overlay element is an immediate sibling of the dialog widget and exposes the ui-widget-overlay class, so you can match it and modify the background color on a per-dialog basis:

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

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

You can see the results in this fiddle.

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

#3

The background of the JQuery dialog is a div that has the class "ui-widget-overlay". The key styles you want to adjust is "opacity", "filter" and "background-color" ("opacity" and "filter" are two different ways of setting opacity for the different browsers.) You can either adjust the class definition or do the following in the dialog definition:

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

#4

Frederic's answer was very close but it left me with one problem: I had more than one dialog on that page, and after I changed the overlay for the one dialog, it changed all of them until the page was reloaded. However, it did give me an idea;

弗雷德里克的答案非常接近，但它给我留下了一个问题：我在该页面上有多个对话框，在我更改了一个对话框的叠加层后，它改变了所有这些，直到页面被重新加载。但是，它确实给了我一个想法;

First I stored the default values into variables (page scope), and then set my custom style.

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

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

Then when the dialog is closed, I restored those values.

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

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

The main reason for storing them in variables (as opposed to resetting them to explicit values) is for maintainability. This way, even if the site.css changes, it will work.

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

Thanks for your help!

谢谢你的帮助！

#5

Change background:

换背景：

$(".ui-widget-overlay").css({background: "#000", opacity: 0.9});

Restore background to CSS values:

将背景还原为CSS值：

$(".ui-widget-overlay").css({background: '', opacity: ''});

#1