jquery对话框替换关闭按钮图标

时间:2012-10-31 16:25:19

标签: jquery css jquery-ui button jquery-ui-dialog

我想更改jquery Dialog中的默认关闭图标按钮。

我尝试在jquery-ui-1.8.23.custom.css中添加这个css类:

.ui-icon-myCloseButton { background-image: url(/path/image.png); }

并在对话框定义中:

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

});

但没有运气,任何想法?

1 个答案:

答案 0 :(得分:9)

你刚刚错过了一个结束的大括号:

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

但是,最重要的是,你的css类应声明为:

.ui-icon.ui-icon-myCloseButton{
    background-image: url(https://www.goldbroker.com/pages/images/close.png);
}​

问题是.ui-icon的定义覆盖了您的自定义图像。当您使用上面的CSS重新定义时,它完全有效。

在这里,有一个小提琴:http://jsfiddle.net/adrianonantua/FuWsK/2/