jquery dialog replace close button icon

Question

I want change the default close icon button in jquery Dialog.

I tried to add this css class in jquery-ui-1.8.23.custom.css:

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

and in the Dialog Definitions:

$('#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");

});

but no luck, any idea?

Solution

You were just missing a closing curly bracket:

$('#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");
    }
});​

But, most important, your css class should be declared as:

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

The thing is that the definition at .ui-icon was overriding your custom image. When you redefine using the css above, it fully works.

Here, have a fiddle: http://jsfiddle.net/adrianonantua/FuWsK/2/

Comments

[Bruno Mósca]

sorry, I had the bracket, but I'm working in a remote machine who cannot permit to copy-paste the code, then I paste the code manually and forgot the bracket.

[Adriano Carneiro]

I updated my answer to fully a working solution, please check

[Bruno Mósca]

I declared the class as above, but nothing happens. here is my css: "/* Icons ----------------------------------/ / states and images / .ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); } .ui-icon .ui-icon-myCloseButton { background-image: url(images/quadrado_Fechar.png); } .ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); } ... / positioning */ .ui-icon-myCloseButton { background-position: 0 0; } .ui-icon-carat-1-n { background-position: 0 0; } ..."

[Bruno Mósca]

sorry for the text formatting but I don't know how can I dispose text correctly in comment tab

[Adriano Carneiro]

@BrunoMósca Have you tested the fiddle?

[Bruno Mósca]

yes @Adrian, fiddle was fine, but in my project still show another icon