Question

我希望在模态对话框loadui-widget-overlay和property background-color时更改页面packground颜色当我用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，但当时在DOM中不存在类ui-widget-overlay的元素。

它与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
});

Answer 2

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

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

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

2 个答案: