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?

Gaul

Spotted a syntax error, remove the . from addClass(".ui-icon-myCloseButton"); : addClass("ui-icon-myCloseButton"); It will still add the class, but I believe it will add it like: class=".ui-icon-myCloseButton" instead of class="ui-icon-myCloseButton" – Brewton

adding the '.' in addClass() method still not solve the problem. the icon who appear is the first-one of the ui-icons_888888_256*240.png file from custo Jquery CSS theme – Jaunita

check @Adrian's answer. This was just something I spotted while looking for the answer and Adrian beat me to it. – Brewton

Answer 1

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/

Blucher

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. – Jaunita

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

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; } ..." – Jaunita

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

@BrunoMósca Have you tested the fiddle? – Blucher

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