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

Question

我想在模式对话框加载UI小部件覆盖和属性background-color
时更改页面包地颜色当我使用 CSS 设置它时，它工作正常

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

使用 CSS
演示

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

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

演示与 jquery

为什么？

Answer 1

演示

代码有问题

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

您将background设置为 white但当时 DOM 中不存在具有类 ui-widget-overlay 的元素。

它适用于CSS，因为只要类ui-widget-overlay在DOM css规则中就可以工作。

但是在 jQuery 中使用 .css() 会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
});

Answer 2

http://jsfiddle.net/dmGe5/2/

此时您的代码中不存在ui-widget-overlay，所以我移动了它。