简短回答

Question

我很难弄清楚如何更改jQuery UI Dialog的背景颜色。

我见过很多参考如何更改/删除标题栏但不是整个背景，包括那些弯曲的角落。

这是我的尝试：

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

问题是 .ui-widget-content 仅适用于对话框中的方形区域，但不包括弯角。

我找到了一个类 .ui-corner-all 类，希望它会为整个背景着色，但只有一半的对话框是彩色的。（你可以在jsfiddle中看到这个）

以前有人这样做过吗？

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}

Answer 2

使用css类：

的 UI-对话框

整件事的主要容器

的 UI-对话框的标题

这是标题实际出现的地方

的 UI-对话框的标题栏

如果存在对话标题的区域

的 UI-对话框的内容

实际加载div的区域

的 UI调整大小手柄

这些div用于调整对话框的大小，但通常根据您的设置隐藏

的 UI-对话框的buttonpane

如果存在按钮，这里就是

的 UI-对话框的buttonset

这是按钮实际显示的位置

此外，与选择的答案不同，请注意，您无需使用!important 。

如果您想要直接通话，请设置所有内容并创建对话框。在Chrome或FF中加载页面（更易于阅读镀铬）。然后只需打开对话框并选择要更改的元素。在Browser's Developer Tools中查看其CSS。您将能够看到jqueryui用于进行css调用的完全行。只需将该行复制到您自己的CSS中，并确保稍后加载该对话框，您的对话框将获得新的覆盖。

Answer 3

请注意，您还可以使用jQuery中的此链接创建自己的自定义CSS

http://jqueryui.com/themeroller/

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

然后你需要在其中下载整个jQuery包，你会发现css / custom-css文件夹只是放在你的css标签中，它将基本上全部排序。

上面的方法也是如此，因为你可以改变它但是你必须在CSS中查找类和类似的东西jQuery jQuery以一种简单的方式为我们做这件事它对我也有用所以你也可以尝试一下。

我基本上做的是创建两到三个自定义样式表，然后加载它们并与它们一起玩，最后选择一个用于网站并丢弃其余部分。

我希望这会有所帮助......

Answer 4

如果您想定位特定对话框，可以这样做：

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

Answer 5

在css中使用此类

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

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）。

您可以单击该值，然后键入一个新值以验证它会达到您想要的效果。

要查看将要用于覆盖格式的格式，请单击右上角的filename：line＃转到定义属性（jquery-ui.css:802）的.css文件

格式为

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

您的.css文件需要使用相同的样式，并且要包含在此样式之后（请参见上面的“简短回答”）。

人们有时会错误地添加!important css后缀来绕过此要求，但这会引起其他各种麻烦。

如何更改jQuery UI Dialog的背景颜色？

6 个答案:

简短回答

长答案