Question

我正在尝试编辑我的对话框，以便有一个透明的标题栏，仍然会显示一个替换'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'不会显示（尽管默认颜色也没有）。有什么建议吗？

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

Answer 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.
});

Answer 2

如你所愿

background: transparent repeat-x scroll 50% 50%;

编辑Jquery Dialog CSS

2 个答案: