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

时间:2013-06-26 17:59:11

标签: jquery jquery-ui

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

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

1 个答案:

答案 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;
}

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