1

使用 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有一个活生生的例子。

关于如何解决这些问题的任何想法？

4

1 回答 1

3

我会专注.ui-icon-closethick于 jQuery UI 中的类。一些检查表明他们使用CSS 精灵图像和背景定位来加载不同的图标。

像这样：

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

小提琴：http: //jsfiddle.net/hamstu/w42Yw/1/

于 2013-06-26T18:11:17.503 回答