Question

使用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有一个实例。

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

Answer 1

我会专注于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;
}

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

JQuery UI对话框 - 当焦点丢失时，自定义关闭按钮消失

1 个答案: