2

我正在尝试编辑我的对话框以具有一个透明的标题栏，该标题栏仍然显示一个备用的“X”来关闭它，但我现在遇到的问题是我的对话框 css：

/* Creates the 'X' used to close dialog */
.ui-widget-header .ui-icon 
{
    background-image: url("../Images/X.png") !important;
}  

/* Removes padding from title bar */
.ui-dialog .ui-dialog-titlebar 
{
    padding: 0;
    position: relative;
}
/* Remove title image and keep 'x' */
.ui-widget-header {
    background: transparent repeat-x scroll 50% 50% #F6A828;
    border: 1px solid #E78F08;
    color: #FFFFFF;
    font-weight: bold;
}

到目前为止，透明并没有覆盖默认颜色（添加!important也不会改变任何东西）并且“x”没有显示（尽管默认也没有）。有什么建议么？

编辑：此链接显示带有我的代码的对话框。注意背景在运行时是如何不透明的。在玩了一会儿之后，我认为图像正在加载，但我看不到它（颜色非常相似）所以我认为一旦标题颜色得到解决，这个问题也会消失

4

2 回答 2

1

如你所愿

background: transparent repeat-x scroll 50% 50%;
于 2011-04-20T08:06:54.097 回答
1

这是我以前做过的事情，没有删除标题图像，而是将其缩小为仅包含“X”。并在打开时在 js 中完成。

    $('#dialog').dialog();
var d = $('#dialog').dialog('open');

var titleBar = d.parent().find('div.ui-dialog-titlebar');
d.parent().find('span.ui-dialog-title').text('');
titleBar.css({
    'width' : '10px',
    'height' : '10px',
    'float' : 'right',
    'top' : '-35px'//only used to move x above dialog. not needed.
});
于 2011-04-19T18:21:18.993 回答