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

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中加载页面(更易于阅读镀铬).然后只需打开对话框并选择要更改的元素.在浏览器的开发人员工具中查看其CSS .你将能够看到jqueryui使用的确切行来进行css调用.只需将该行复制到您自己的CSS中,并确保稍后加载该对话框,您的对话框将获得新的覆盖.

Answer 3

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

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