CSS 替换 JQueryUI 对话框的关闭图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7909157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Replacing the Close icon for a JQueryUI Dialog box
提问by Axle
After extensive searching on this topic, I haven't been able to find an answer, so hopefully someone can help me with this issue. I have a relatively basic dialog box:
在对这个主题进行广泛搜索后，我一直无法找到答案，所以希望有人能帮助我解决这个问题。我有一个比较基础的对话框：
$("#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);
}
});
What I want to do is replace the X icon (ui-icon-close) with a different icon provided by the ui (ui-icon-minus), so that clicking the minus icon closes the dialog instead. I've seen posts on how to hide the icon or replace it with a custom image in css, but I haven't yet found a way to replace the icon with another icon to perform the same functionality.
我想要做的是用 ui (ui-icon-minus) 提供的不同图标替换 X 图标 (ui-icon-close)，以便单击减号图标关闭对话框。我已经看过有关如何隐藏图标或用 css 中的自定义图像替换它的帖子，但我还没有找到用另一个图标替换图标以执行相同功能的方法。
Edit: I also want to be able to use ui-icon-close for a different functionality in my dialog box by adding a custom behavior/location, but that may be outside the scope for this question. Feel free to address this if it's a related solution, though.
编辑：我还希望能够通过添加自定义行为/位置在我的对话框中使用 ui-icon-close 来实现不同的功能，但这可能超出了这个问题的范围。不过，如果这是一个相关的解决方案，请随意解决这个问题。
回答by Quincy
Try to see the structure of the dialog and it should not be hard to do it.
尝试查看对话框的结构，应该不难做到。
http://jqueryui.com/demos/dialog/#theming
http://jqueryui.com/demos/dialog/#theming
Use the createevent to change the class of the close button icon to class of another icon will do.
使用该create事件将关闭按钮图标的类更改为另一个图标的类即可。
http://jsfiddle.net/Quincy/kHU2M/1/
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");
}
});
回答by udalmik
Old question, but maybe I'll help someone. Following CSSmade the trick for me, totally custom Closebutton UI. Not very elegant :), but works fine for me.
老问题，但也许我会帮助某人。以下CSS是我的诀窍，完全自定义Close按钮 UI。不是很优雅:)，但对我来说很好用。
.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;
}
My custom close button shown below:
我的自定义关闭按钮如下所示：
