使用jQuery UI,我使用以下CSS创建了一个带有自定义关闭图标的对话框:
/* changing dialog close button */
.ui-dialog-titlebar-close
{
border: none !important;
background-image: url('images/icon-close-16.png');
background-repeat:no-repeat;
}
/* changing dialog close button */
.ui-dialog-titlebar-close:hover,
.ui-dialog-titlebar-close:focus
{
background-color: transparent !important;
border: none !important;
background-image: url('images/icon-close-16.png');
background-repeat:no-repeat;
}
/* hide the default "x" close image */
.ui-dialog-titlebar-close span
{ display:none !important; }
但是,有两种不良影响正在发生。
最重要的是,如果单击对话框中的文本,我用于关闭图标的图像将消失。 (然而,当鼠标悬停在该位置上时,它会重新出现。)
其次,尽管我试图通过.ui-dialog-titlebar-close
中的样式删除边框,但最初会在图标周围出现边框。
http://home.adelphi.edu/~stemkoski/JQuery-testing.html有一个实例。
关于如何解决这些问题的任何想法?
答案 0 :(得分:2)
我会专注于jQuery UI中的.ui-icon-closethick
类。一些检查显示他们使用CSS sprite image和背景定位来加载不同的图标。
像这样:
.ui-icon-closethick {
background-image: url('http://home.adelphi.edu/~stemkoski/images/icon-close-16.png') !important;
background-repeat: no-repeat;
background-position: center center;
}