jQuery UI Library Dialog Dialog with no close button


Example

If you like to show the dialog without the close button (i.e. the x button in the upper-right corner of the dialog), perhaps because you want to force the user to select one of options or buttons in the dialog itself:

1- Give your dialog a CSS class:

$("#selector").dialog({
    closeOnEscape: false,
    dialogClass: "dialog-no-close",
});

2- Hide the close button using this CSS:

.dialog-no-close .ui-dialog-titlebar-close {display: none; }

Note: If you want to hide the entire title bar, use this CSS instead:

.dialog-no-close .ui-dialog-titlebar {display: none; }

Alternatively, you can hide the close button in the dialog's initialization code:

$("#selector").dialog({
    closeOnEscape: false,
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close", $(this).parent()).hide();
    }
});