javascript - JQuery UI 对话框 - 更改标题颜色仅部分有效

Question

我正在使用 JQuery UI 的对话框模块，一切正常，而且我基本上可以设置它的样式，但是有一两个我无法弄清楚的奇怪之处:<​​/p>

1) 我正在尝试将标题栏的颜色从默认颜色更改为紫色。这是我的 CSS:

.ui-dialog-title {
font-family: 'Andika', sans-serif;
color: #FFFFCC;  
background-color:#330033;
}

.ui-dialog-titlebar {
   background-color:#330033;
}

成功了一半:字体发生变化，文字后面出现一个紫色矩形，但栏的其余部分保持默认颜色。更改 .widget-header 没有帮助。

2) 我正在尝试更改容器边框颜色。这是我的 CSS:

.ui-dialog {
background-color:#330033;
}

它又一次成功了——大部分边框变成了紫色，但还剩下两条小白线。我已经尝试确保我也更改了调整大小 handle ，这使线条更细但没有完全摆脱它们。

这是显示我当前获得的内容的屏幕截图:

这是我创建对话框的代码，以防万一我在这一点上搞砸了(虽然看不到什么):

//called by 'Demos' button onclick
function demos() {
var $dialog = $('<div id="dialog">Coming Soon</div>');
var $title = "Demos";
dialog($dialog, $title);

....    

function dialog(dialog, title) {
$title = title;
$dialog = dialog;
$dialog.dialog({show: {effect: "blind", duration: 500}}, {title:$title}, {width:700},     
{height:400}, {modal: true});
$dialog.dialog('open');
}

编辑添加:这是带有调用对话框的按钮的 HTML:

<div id="portfolio" class ="grey">
        <b>PORTFOLIO</b>
        <br />
        <div id="buttonHolder">
        <input type="button" class="button" value="Websites" onclick="websites()">
        <input type="button" class="button" value="Apps" onclick="apps()">
        <input type="button" class="button" value="Demos" onclick="demos()">
        <input type="button" class="button" value="Games" onclick="games()">
        <input type="button" class="button" value="Resources" onclick="resources()">
        </div>            
    </div>

编辑以再次添加:如果我删除#dialog div 上的样式，这就是我所拥有的: ???

Answer 1

你只需要改变这个:

.ui-dialog { background-color:#330033; }

到:

.ui-dialog { background:#330033; }