How to remove close button on the jQuery UI dialog?
the "best" answer will not be good for multiple dialogs. here is a better solution.
open: function(event, ui) {
//hide close button.
$(this).parent().children().children('.ui-dialog-titlebar-close').hide();
},
You can use CSS to hide the close button instead of JavaScript:
.ui-dialog-titlebar-close{
display: none;
}
If you don't want to affect all the modals, you could use a rule like
.hide-close-btn .ui-dialog-titlebar-close{
display: none;
}
And apply .hide-close-btn
to the top node of the dialog
I have found this worked in the end (note the third line overriding the open function which find the button and hides it):
$("#div2").dialog({
closeOnEscape: false,
open: function(event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
}
});
To hide the close button on all dialogs you can use the following CSS too:
.ui-dialog-titlebar-close {
visibility: hidden;
}
Here is another option just using CSS that does not over ride every dialog on the page.
The CSS
.no-close .ui-dialog-titlebar-close {display: none }
The HTML
<div class="selector" title="No close button">
This is a test without a close button
</div>
The Javascript.
$( ".selector" ).dialog({ dialogClass: 'no-close' });
Working Example