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

Question

我正在使用JQuery UI的对话框模块，让它全部正常工作，并且我大多能够将它设置好，但是有一两个奇怪的东西我无法弄清楚：

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;
}

再次它半工作 - 大部分边界变成紫色，但剩下两条小白线。我已经尝试确保我也改变了调整大小的句柄，这使得线条更细，但没有完全摆脱它们。

这是一个屏幕截图，显示我目前正在获得的内容：

这是我创建对话框的代码，以防我此时搞砸了什么（虽然看不清楚）：

//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; }