How to remove close button on the jQuery UI dialog?

Question

How do I remove the close button (the X in the top-right corner) on a dialog box created by jQuery UI?

Answer 1

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; } 

Answer 2

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