jQuery：设置模态对话框覆盖层颜色

Question

我想使用jQuery UI弹出一个模态对话框，其中覆盖层完全为黑色。我知道可以在主题中设置，但我不想让所有对话框都有黑色的遮罩。只有其中一个。

是否有一种方法可以按每个对话框配置对话框的背景（遮罩）颜色？也许是在创建时？

提前致谢。

- mtmurdock

---

可能是Darker background in Jquery UI dialog的重复问题。 - Dave Jarvis

Answer 1

您可以使用ui-dialog的open和close事件。

$("#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;    
}

- mohitp

---

这样做的唯一问题是“z-index: 1040”将覆盖层放置在对话框之上。移除z-index，就可以正常工作了。 - Marcus

一个小的改进，选择器 $('.ui-widget-overlay') 将找到所有已打开对话框的遮罩层。您可以通过添加新的方法来扩展 jQuery UI，以获取特定对话框的遮罩层。 - Fisk

$.widget("ui.dialog", $.ui.dialog, { getOverlay: function() { return (this.overlay) ? this.overlay.$el : $(); } });调用 $("#your-dialog").dialog('getOverlay') 即可实现你想要的功能。 - Fisk

Answer 2

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

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

你可以在这个 fiddle 中查看结果。

- Frédéric Hamidi

---

嗯，当我这样做时，我的叠加层会出现在页面底部，扩展页面高度，而不是在我的原始对话框后面。 - Alan Macdonald

实际上，我也在使用CSS时遇到了这个问题，因此上面的JavaScript没有任何问题。 - Alan Macdonald

Answer 3

JQuery对话框的背景是一个具有“ui-widget-overlay”类的div。您想调整的关键样式是“opacity”，“filter”和“background-color”（“opacity”和“filter”是为不同浏览器设置不透明度的两种不同方式）。您可以调整类定义或在对话框定义中执行以下操作：

$("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
});

- Michael Erickson

---

JQ UI如何在其覆盖层中使用图像？ - Todd Vance

Answer 4

弗雷德里克的回答非常接近，但留下了一个问题：我在页面上有不止一个对话框，在更改了一个对话框的叠加层后，直到重新加载页面之前，所有对话框都被更改了。然而，这给了我一个思路；

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

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 发生更改，也可以正常工作。

感谢您的帮助！

- mtmurdock

---

所以叠加元素被用于所有对话框小部件... 很好的发现 :) - Frédéric Hamidi

最终我实现了通过添加和删除设置这些值的CSS类来完成相同的机制。 - mtmurdock

Answer 5

更改背景：

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

将背景恢复为CSS值：

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

- Ronny Sherer

---

更简单的解决方案。谢谢！ - Troy Harris