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

Question

当我加载对话框的时候，背景会变得有点灰色。我想让它变得更暗一些，但我找不到负责这个的属性。我该怎么做？

- Vonder

Answer 1

那就是这个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);
}

它位于行294：jquery-ui-1.8.11.custom.css

- Naftali

---

我不建议编辑jQuery的CSS样式 - 这将意味着难以升级到新版本。我建议在一个比jQuery文件后加载的CSS文件中提供一个覆盖，以定义相同ui-widget-overlay类的自定义样式。 - Bernhard Hofmann

遗憾的是，jQueryUI CSS 添加了视觉样式属性...即使在其基本CSS中也是如此，这些样式本来不应该有任何展示样式。这意味着每当您使用 jQueryUI 包时，您将不得不覆盖 jQuery 覆盖的每个属性，这不仅繁琐而且还是一个移动目标（如果您升级 jQuery 版本，您将不得不再次验证所有样式）。这打破了 D.R.Y. 原则（在您的常规样式表中声明相同的样式，然后再进行覆盖）。 - Matt Brock

这对我不起作用... 我需要使用Blender版本的类，其中有几个地方有“!important”。 - Mike Gledhill

你应该将小部件叠加层扩展到100%的宽度/高度。 - GeorgiG

默认情况下已经是这样了。这是为了覆盖颜色 @GeorgiG - Naftali

我的不是，我在另一篇帖子中找到了解决方案。@Neal - GeorgiG

Answer 2

请在您的样式表中添加以下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 */
}

- Blender

---

就像您在第294行所看到的那样，已经在样式表中了。 - Naftali

我知道，我只是覆盖它（请看末尾的！important）。通常我不喜欢摆弄一千行的 CSS 文件，所以经常会进行覆盖。 - Blender

但是，如果您只是在Firebug或Chrome中进入检查元素，您将准确地看到问题所在的行 ^_^ - Naftali

@Blender - 很好的解决方案。我将其插入到我的网站上，但是整个叠加层会出现一条浅灰色条纹。不知道为什么会发生这种情况，有什么想法吗？ - spinlock

@Spinlock：我也遇到了同样的问题。你还需要在类中添加这个："background: none;"。 - Mike Gledhill

Answer 3

对我真正起作用的是：

//in dialog setting code
open: function(event, ui) {
  $('.ui-widget-overlay').css({ opacity: '.5' });
},

我不建议在CSS中直接设置对话框的透明度，因为它会影响网站上打开的所有对话框，这可能不是期望的结果。

- MaxZoom

Answer 4

像@spinlock一样，我有水平运行的条纹：

要删除条纹并使用自定义背景颜色，您可以在打开事件中执行以下操作：

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' })
}

- bedomon

---

或者你可以添加一个类，然后再删除它。兄弟，还是个好主意！点赞了。 - Rum Jeremy

Answer 5

最简单的方法是使用主题生成器。

- nfechner

---

+1. Themeroller 是必须选择的。每个人都会遇到与背景中的亮色带相关的问题，这是因为背景图像太浅了。我使用 Themeroller 生成了一个新图像（黑色的50%），当透明时比默认的 #aaaaaa 好看得多。使用这种方法可以固定 CSS 和图像，并在 CSS 文件中获得一个 URL，您可以用来再次编辑主题。 - NightOwl888

Answer 6

我在Blender的解决方案中遇到了自旋锁问题，但将“background-color”更改为“background”就解决了。我认为原因是最初（jQuery-UI）CSS使用了那个PNG图形。

- David M. Anderson

Answer 7

最简单的方法是：

open: function() {
   $(this).closest('[role="dialog"]').css({ opacity: '.9' }); // 設置透明度
},

完整代码

var myDialog = $('<div id="_jwuDialog"></div>').dialog({
    modal: false,
    title: "標題",
    resizable: true,
    width: 300,
    height:120,
    position: { my: "center", at: "bottom"},
    open: function() {
        $(this).closest('[role="dialog"]').css({ opacity: '.7' }); // 設置透明度
        $(this).html('設置文字');
    },
});

- kkasp