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

您可以在this fiddle中看到结果。

Answer 3

JQuery对话框的背景是一个包含类＆＃34; ui-widget-overlay＆＃34;的div。您要调整的关键样式是＆＃34;不透明度＆＃34;，＆＃34;过滤＆＃34;和＆＃34;背景色＆＃34; （＆＃34;不透明度＆＃34;和＆＃34;过滤器＆＃34;是为不同浏览器设置不透明度的两种不同方法。）您可以调整类定义或在对话框定义中执行以下操作：

$("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

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

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

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发生了变化，也会有效。

感谢您的帮助！

Answer 5

更改背景：

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

将背景还原为CSS值：

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

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

5 个答案: