编辑 Jquery 对话框 CSS

发布于 2024-11-02 11:17:08 字数 816 浏览 4 评论 0原文

我正在尝试编辑我的对话框以拥有一个透明的标题栏，该标题栏仍然显示一个备用的“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”不会显示（尽管默认值也不会显示）。有什么建议吗？

编辑：此链接显示包含我的代码的对话框。请注意运行时背景如何不透明。经过一番尝试后，我认为图像正在加载，但我只是看不到它（颜色非常相似），所以我认为一旦标题颜色解决了，问题也会消失

原文

I am trying to edit my dialog box to have a transparent title bar that still shows an alternate 'X' to close it, but I am having issues here is my dialog css as of now:

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

As of now the transparent does not over ride the default color (adding !important doesn't change anything either) and the 'x' does not show up (though the default doesn't either). Any suggestions?

EDIT: This link shows the dialog box with my code. Notice how the background is not transparent when it runs. After playing around with it for a bit, I think the image is loading, but I just cannot see it (the colors are very similar) so I think once the title color is resolved that issue will go away as well

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦与时光遇 2024-11-09 11:17:08

如你所愿

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

As you wish

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

回复收藏 0 原文

忆梦 2024-11-09 11:17:08

这是我之前做过的事情，没有删除标题图像，而是将其缩小为仅包含“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.
});

Here is something i've done before, not removing the title image, but shrinking it to only contain the 'X'. and all done in the js when opening.

    $('#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.
});

回复收藏 0 原文

~没有更多了~