Despite my thorough search efforts on this topic, I have not been able to find a solution to my issue. Hopefully someone can assist me with this problem. I am working with a simple 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);
}
});
My goal is to replace the default 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 have come across suggestions on hiding or customizing the icon with CSS, but I have yet to find a solution to directly replace the icon for the same functionality.
Edit: Additionally, I intend to use ui-icon-close for a different purpose in my dialog box by implementing a custom behavior/location. This might be beyond the scope of this question, but feel free to discuss if it aligns with a potential solution.