jquery - 动态设置 JQuery UI 模式对话框覆盖背景颜色

Question

我想在模式对话框 loadui-widget-overlay 和属性 background-color
时更改页面包背景颜色当我用 css 设置它时它工作正常

.ui-widget-overlay {
   background-color: white;
}

demo-with css

但我想动态更改它，因为我有一些模式对话框，我只想更改其中之一
我尝试使用jquery，但它不起作用

$('.ui-widget-overlay').css('background', 'white');

demo-with jquery

为什么？

Answer 1

DEMO

您的代码有问题

$('.ui-widget-overlay').css('background', 'white');

你设置background至white但是类 ui-widget-overlay 的元素当时 DOM 中不存在。

它适用于 CSS每当上课时ui-widget-overlay在 DOM 中 css 规则将起作用。

但是使用 .css()在jQuery看跌inline styling因此，如果 DOM 中不存在该元素，则 inline styling 不存在可以添加。

解决方案

对话框打开后，您可以将此代码作为类 ui-widget-overlay 执行现在存在。

工作代码

$("#dialogDiv").dialog({
    autoOpen: false,
    modal: true
});
$("#btn").click(function () {
    $("#dialogDiv").dialog('open');
    $('.ui-widget-overlay').css('background', 'white'); //write background color change code here
});