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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19473821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 00:03:23  来源:igfitidea点击:

Set JQuery UI modal dialog overlay background color dynamically

jquerycssjquery-uimodal-dialog

提问by lealam

i want change the page packground color when the modal dialog loadui-widget-overlay and property background-color
when i set it with css it Works fine

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

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

demo-with css

带 css 的演示

but i want change it dynamically Because i have some modal dialog and i want change it only One of them
i try use jquery but it not work

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

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

demo-with jquery

使用 jquery 演示

why?

为什么?

回答by Tushar Gupta - curioustushar

DEMO

演示

Problem with your code

你的代码有问题

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

you set backgroundto whitebut the element with class ui-widget-overlaydoesnot exist at that time in the DOM.

您设置background为,whiteui-widget-overlay当时在 DOM 中不存在具有 class 的元素。

It works with CSSas whenever class ui-widget-overlayis in DOM css rules will work.

它与CSS作为每当类 ui-widget-overlay是DOM CSS规则将起作用。

But using .css()in jQueryputs inline stylingso if the element is not present in DOM than no inline stylingcan be added.

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

Solution

解决方案

After the Dialog is open you can perform this code as class ui-widget-overlayexists now.

对话框打开后,您可以执行此代码,因为类ui-widget-overlay现在已经存在。

Working code

工作代码

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

回答by Scott Rowell

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

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

ui-widget-overlaydoesn't exist at that point in your code, so I moved it.

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