如何更改jQuery UI对话框的背景颜色？

Question

我正在努力弄清楚如何更改 jQuery UI Dialog 的背景颜色。

我看到了很多关于如何更改/删除标题栏的参考资料，但没有包括整个背景（包括那些曲线角落）。

这是我的尝试：

http://jsfiddle.net/dEvKb/11/

问题在于.ui-widget-content仅适用于对话框中的正方形区域，而不包括曲线角落。

我找到了一个类名为.ui-corner-all，希望它可以给整个背景上色，但只有对话框的一半被涂色了。（您可以在jsfiddle上看到这一点）

有人以前做过这件事吗？

- Meow

---

在.ui-dialog中添加背景颜色，然后它应该可以工作。 请参见demo。 - Dips

我必须在内联级别上这样做吗？如果我在外部CSS中定义样式，则不会应用样式。查看Firebug，本机jQuery对话框代码会覆盖外部CSS。 - Meow

哦不，我错了。我的CSS类选择器定义错误了。本应是“.foo.bar”（没有空格），而不是“.foo .bar”。 - Meow

Answer 1

您可以使用以下方法：

http://jsfiddle.net/dEvKb/15/

您应该使用! important将所有类的背景设置为黄色。

.ui-dialog，.ui-widget，.ui-widget-content，.ui-corner-all，.foo，.ui-draggable，.ui-resizable {background:yellow !important}

- Sinan AKYAZICI

---

谢谢！我认为现在stackoverflow对jsfiddle有依赖。 - Meow

@Paul 可能是由于其他 CSS 的影响导致它无法正常工作。您可以使用 Firebug 或 Chrome Dev 工具进行检查。 - Sinan AKYAZICI

这里有两个 .ui-dialog。顺便说一下，我发现这样可以保存标题：.ui-dialog, .ui-dialog, .ui-widget-content, .ui-draggable, .ui-resizable。 - Vael Victus

你应该使用!important来设置所有类别的背景。我不同意这个说法。如果你想要添加一个"鼠标悬停高亮"类型的类别，那么背景颜色就永远不会改变了。你不需要使用!important，你可以直接引用，比如#myelementID .myClassContainer .ui-widget，可以得到相同的"覆盖"结果，并且不会造成"永久"更改的问题。 - SpYk3HH

这对我有用，除了我的对话框内有jqueryUI日期选择器..它被涂上相同的背景色(几乎消失了-除了数字)..不确定如何解决它 - Upland

Answer 2

使用以下CSS类：

• ui-dialog
  • 整个容器的主要部分
• ui-dialog-title
  • 标题实际出现的位置
• ui-dialog-titlebar
  • 如果存在，则是对话框标题的区域
• ui-dialog-content
  • 您的div实际加载的区域
• ui-resizable-handle
  • 这些div用于调整对话框大小，但根据您的设置通常是不可见的
• ui-dialog-buttonpane
  • 如果存在，则是按钮放置的位置
• ui-dialog-buttonset
  • 按钮实际出现的位置

此外，与所选答案不同，请注意，您不必使用!important。

如果您想直接调用，请设置所有内容并创建对话框。在Chrome或FF中加载页面（Chrome更易于阅读）。然后只需打开对话框并选择要更改的元素。在浏览器开发者工具中查看其CSS。您将能够看到jqueryui使用的确切行来进行CSS调用。只需将该行复制到自己的CSS中，并确保稍后加载它，您的对话框将获得新的覆盖。

- SpYk3HH

---

虽然这是老帖子了，但我只想感谢SpYk3HH提供的简单事项清单，让这个新手的生活变得更加容易。谢谢！ - TimSPQR

@TimSPQR 我只是尽我所能去帮助和回馈，因为这个网站和其他几个网站帮助我从旧的DOS和PERL时代走了很远。 - SpYk3HH

这个解决方案无法从样式表或样式块中工作，因为只有ui-dialog-content将驻留在定义的DIV块中。#myelementID.ui-dialog-content可以工作，所有其他内容都在您的DIV之外，因此必须以其他方式访问它们。 - MC9000

Answer 3

如果您想针对特定的对话框进行操作，可以按照以下方式进行：

$('#yourDialog').dialog(
{
    autoOpen: false,
    open: function(e) {
        $(e.target).parent().css('background-color','orangered');
    }
});

- zach

---

或者简单地说：$("#dialogId").css("background-color", "ColorName 或 Code"); - Mayank

Answer 4

使用此类在CSS中。

.ui-dialog .ui-dialog-content {
    border: 0;
    padding: .5em 1em;
    background: #ff0000;
    overflow: auto;
    zoom: 1;
}

- Deepakmahajan

Answer 5

请注意，您也可以使用jQuery中的此链接制作自己的自定义CSS。

http://jqueryui.com/themeroller/

jQuery允许我们制作自定义CSS。请从库中选择您想要的主题，点击编辑按钮，您将能够改变对话框几乎所有的东西，以及圆角。

然后，您需要下载整个jQuery包，在其中您将找到css/custom-css文件夹，只需在您的css标签中放入它，就可以轻松完成了。

上述方法也是正确的，您可以进行更改，但您必须在CSS中寻找类和其他东西，而jQuery可以为我们提供一种简单的方法来实现，这对我也有效，所以您也可以尝试。

我基本上会创建两到三个自定义样式表，然后加载它们并进行调整，最后选择一个用于网站并丢弃其余部分。

希望这可以帮助您...

- Kevin

Answer 6

简短回答

your_stylesheet.css

.ui-widget-content { background: yellow; }

请确保您的样式表在 JQuery UI 样式表之后引入，例如：

your_webpage.html

    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <link href="your_stylesheet.css" rel="stylesheet" type="text/css"></link>

长答案

为了确定要覆盖哪个类和样式，您需要检查工具提示。显示工具提示：

$("#selector_for_item_with_tooltip").tooltip('open')

右键单击工具提示，选择“检查”。在“样式”选项卡中向下滚动，直到找到您关心的属性（background-color）。

您可以点击该值并输入新值以验证它是否会产生您想要的效果。

要查看覆盖格式所需使用的格式，请单击右上角的文件名：行号以转到定义属性的 .css 文件（jquery-ui.css:802）

格式将会是

.ui-widget-content
{
    background: yellow;
}

您的 .css 文件需要使用相同的样式，并在这个文件之后被引用（参见上面的“简短回答”）。

有些人会错误地加上 !important css 后缀来绕过这个要求，但这会带来各种各样的问题。

- Stefan