设置 JQuery UI 模态对话框覆盖背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5583995/
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
Set JQuery UI modal dialog overlay background color
提问by Vonder
When I load the dialog the background gets a little bit grey. I would like to make it darker, but I cannot find a property that is responsible for that. How can I achieve this?
当我加载对话框时，背景会变得有点灰暗。我想让它变暗，但我找不到对此负责的属性。我怎样才能做到这一点？
采纳答案by Naftali aka Neal
That is in this css element:
这是在这个 css 元素中：
.ui-widget-overlay {
background: #AAA url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
opacity: .30;
filter: Alpha(Opacity=30);
}
it is on line 294 of: jquery-ui-1.8.11.custom.css
它在第 294 行： jquery-ui-1.8.11.custom.css
回答by Blender
Add this CSS to your stylesheet:
将此 CSS 添加到您的样式表中：
.ui-widget-overlay
{
opacity: .50 !important; /* Make sure to change both of these, as IE only sees the second one */
filter: Alpha(Opacity=50) !important;
background: rgb(50, 50, 50) !important; /* This will make it darker */
}
回答by nfechner
Easiest way is to use the themeroller.
最简单的方法是使用 the themeroller。
回答by bedomon
Like @spinlock I have the strip that run horizontally :
像@spinlock一样，我有水平运行的条带：
To remove the strip and use a custom background color you can do like this on the open event :
要移除条带并使用自定义背景颜色，您可以在 open 事件中执行以下操作：
open : function(event, ui){
$("body").css({
overflow: 'hidden'
});
$(".ui-widget-overlay").css({
background:"rgb(0, 0, 0)",
opacity: ".50 !important",
filter: "Alpha(Opacity=50)",
});
},
beforeClose: function(event, ui) {
$("body").css({ overflow: 'inherit' })
}
回答by MaxZoom
What actually worked for me :
什么对我有用：
//in dialog setting code
open: function(event, ui) {
$('.ui-widget-overlay').css({ opacity: '.5' });
},
I will not suggest to setup opacity for a dialog directly in CSS, as it will affect any dialog open across your website, which may not be a desired result.
我不建议直接在 CSS 中为对话框设置不透明度，因为它会影响您网站上打开的任何对话框，这可能不是您想要的结果。
回答by David M. Anderson
I had spinlock's problem with Blender's solution, but changing "background-color" to "background" fixed that. I suspect the reason is that the original (jQuery-UI) CSS uses that PNG graphic.
我在 Blender 的解决方案中遇到了自旋锁的问题，但是将“背景颜色”更改为“背景”解决了这个问题。我怀疑原因是原始（jQuery-UI）CSS 使用该 PNG 图形。
