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

Question

我想在模式对话框 loadui-widget-overlay 和属性时更改页面背景颜色，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为但当时在 DOM 中不存在white具有类的元素。ui-widget-overlay

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

但是使用.css()in jQueryputsinline styling所以如果元素不存在于 DOM 中，inline styling则可以添加 no。

解决方案

对话框打开后，您可以执行此代码，因为类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在您的代码中当时不存在，所以我移动了它。