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

Question

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

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

演示用css

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

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

演示 - 使用jquery

为什么？

Answer 1

DEMO

你的代码有问题

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

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

它适用于CSS每当ui-widget-overlayDOM中的类 css规则都可以工作.

但是如果元素在DOM中不存在则使用.css()in jQuery,inline styling那么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
});