Axle Axle - 1 month ago 10
CSS Question

Replacing the Close icon for a JQueryUI Dialog box

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.

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.

Answer

Try to see the structure of the dialog and it should not be hard to do it.

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

Use the create event to change the class of the close button icon to class of another icon will do.

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");
   }
});
Comments