替换JQueryUI对话框的“关闭”图标

Question

经过广泛搜索这个主题后，我找不到答案，所以希望有人可以帮我解决这个问题。我有一个相对基本的对话框：

$("#dialog-search").dialog({
    resizable: false,
    height:dimensionData.height,
    width: dimensionData.width,
    modal: true,
    title: dimensionData.title,
    position: [x,y],
    open: function() {
        $("#dialog-search .dateField").blur();
    },
    close: function(event, ui){
       callBack(event,ui);
    }
});

我想要做的是用ui（ui-icon-minus）提供的不同图标替换X图标（ui-icon-close），这样点击减号图标就会关闭对话框。我已经看过有关如何隐藏图标或用css中的自定义图像替换它的帖子，但我还没有找到用另一个图标替换图标来执行相同功能的方法。

编辑：我还希望能够通过添加自定义行为/位置在对话框中使用ui-icon-close来实现不同的功能，但这可能超出了此问题的范围。如果这是一个相关的解决方案，请随意解决这个问题。

Answer 1

尝试查看对话框的结构，并不难做到。

http://jqueryui.com/demos/dialog/#theming

使用create事件将关闭按钮图标的类更改为另一个图标的类。

http://jsfiddle.net/Quincy/kHU2M/1/

$("#dialog-search").dialog({
    create: function(event, ui) { 
      var widget = $(this).dialog("widget");
      $(".ui-dialog-titlebar-close span", widget)
          .removeClass("ui-icon-closethick")
          .addClass("ui-icon-minusthick");
   }
});

Answer 2

老问题，但也许我会帮助别人。以下CSS为我制作了诀窍，完全是自定义Close按钮用户界面。不是很优雅:)，但对我来说效果很好。

.ui-icon-closethick {
    background-image: url(images/my-10px-image.png) !important;
    background-position: left top !important;
    margin: 0 !important;
}

.ui-dialog .ui-dialog-titlebar-close, .ui-icon-closethick {
    width: 10px !important;
    height: 10px !important;
}

.ui-dialog .ui-dialog-titlebar-close {
    background: none !important;
    border: none !important;
}

.ui-dialog .ui-dialog-titlebar-close, .ui-dialog .ui-dialog-titlebar-close:hover {
    padding: 0 !important;
}

我的自定义关闭按钮如下所示：