我正在努力弄清楚如何更改 jQuery UI Dialog
的背景颜色。
我看到了很多关于如何更改/删除标题栏的参考资料,但没有包括整个背景(包括那些曲线角落)。
这是我的尝试:
问题在于.ui-widget-content仅适用于对话框中的正方形区域,而不包括曲线角落。
我找到了一个类名为.ui-corner-all,希望它可以给整个背景上色,但只有对话框的一半被涂色了。(您可以在jsfiddle上看到这一点)
有人以前做过这件事吗?
我正在努力弄清楚如何更改 jQuery UI Dialog
的背景颜色。
我看到了很多关于如何更改/删除标题栏的参考资料,但没有包括整个背景(包括那些曲线角落)。
这是我的尝试:
问题在于.ui-widget-content仅适用于对话框中的正方形区域,而不包括曲线角落。
我找到了一个类名为.ui-corner-all,希望它可以给整个背景上色,但只有对话框的一半被涂色了。(您可以在jsfiddle上看到这一点)
有人以前做过这件事吗?
您可以使用以下方法:
您应该使用! important将所有类的背景设置为黄色。
.ui-dialog,.ui-widget,.ui-widget-content,.ui-corner-all,.foo,.ui-draggable,.ui-resizable {background:yellow !important}
!important
,你可以直接引用,比如#myelementID .myClassContainer .ui-widget
,可以得到相同的"覆盖"结果,并且不会造成"永久"更改的问题。 - SpYk3HH使用以下CSS类:
此外,与所选答案不同,请注意,您不必使用!important
。
$('#yourDialog').dialog(
{
autoOpen: false,
open: function(e) {
$(e.target).parent().css('background-color','orangered');
}
});
.ui-dialog .ui-dialog-content {
border: 0;
padding: .5em 1em;
background: #ff0000;
overflow: auto;
zoom: 1;
}
http://jqueryui.com/themeroller/
jQuery允许我们制作自定义CSS。请从库中选择您想要的主题,点击编辑按钮,您将能够改变对话框几乎所有的东西,以及圆角。your_stylesheet.css
.ui-widget-content { background: yellow; }
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 后缀来绕过这个要求,但这会带来各种各样的问题。