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

Posted 2023-02-22

【中文标题】如何更改 jQuery UI 对话框的背景颜色？

【英文标题】：How to change background color of jQuery UI Dialog?

【发布时间】：2012-03-12 11:52:43

【问题描述】：

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

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

这是我的尝试：

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

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

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

以前有人做过吗？

【问题讨论】：

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

我必须在内联级别做吗？如果我在外部 CSS 中定义样式，则不会应用该样式。看萤火虫，原生 jquery 对话框代码覆盖了外部 css

哦不，我错了。我的 css 类选择器定义错误。 “.foo .bar”应该是“.foo.bar”（空格）

【参考方案1】：

简答

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 后缀来绕过此要求，但这会导致其他各种令人头疼的问题。

【参考方案2】：

如果你想定位一个特定的对话框，你可以这样做：

$('#yourDialog').dialog(

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

【讨论】：

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

【参考方案3】：

你可以这样用

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

您应该使用 !important 设置为所有班级背景。

.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable background:yellow !important​

【讨论】：

谢谢！我认为 *** 现在依赖于 jsfiddle

@Paul 可能受其他 css 影响是行不通的。您可以使用 Firebug 或 Chrome 开发工具进行审核。

这有 .ui-dialog 两次。 FWIW，我发现这是为了保存标题：.ui-dialog、.ui-dialog、.ui-widget-content、.ui-draggable、.ui-resizable

"您应该使用 !important 设置为所有班级背景。"我不得不不同意。如果您想在悬停期间添加类似“悬停突出显示”类型的类怎么办。背景永远不会改变。您不必使用!important，您只需像#myelementID .myClassContainer .ui-widget 一样直接引用并获得相同的“覆盖”结果无需“永久”更改的回退。

这对我有用，除了我的对话框中有 jqueryUI datepicker .. 它被绘制成相同的背景（并且几乎消失 - 除了数字）.. 不知道如何绕过它跨度>

【参考方案4】：

使用 css 类：

用户界面对话框

整个东西的主容器

ui-dialog-title

这是标题实际出现的地方

ui-dialog-titlebar

对话框标题所在的区域（如果存在）

ui-dialog-content

实际加载 div 的区域

ui-resizable-handle

这些 div 用于调整对话框的大小，但根据您的设置通常是不可见的

ui-dialog-buttonpane

如果存在按钮，这里就是按钮所在的位置

ui-dialog-buttonset

这是按钮实际出现的地方

另外，与选择的答案不同，请注意，您不必使用!important。

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

【讨论】：

旧线程，但我只是想感谢 SpYk3HH 提供的简单列表，让这个菜鸟的生活变得更加轻松。谢谢！

@TimSPQR 尽我所能提供帮助和回馈，因为这个网站和其他几个网站帮助我远离了旧的 DOS 和 PERL 时代

此解决方案不适用于样式表或样式块，因为只有 ui-dialog-content 将驻留在定义的 DIV 块中。 #myelementID.ui-dialog-content 将起作用，所有其他都在您的 DIV 之外，因此必须以其他方式访问它们。

【参考方案5】：

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

http://jqueryui.com/themeroller/

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

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

上面的方法也是正确的，因为你可以改变它，但是你必须在 CSS 中寻找类和类似的东西 jQuery 以一种简单的方式为我们做到了，它也对我有用所以你也可以试试。

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

希望对你有帮助……

【参考方案6】：

在css中使用这个类

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