How To: jQuery UI - Dialog With the Close Button Hidden

The jQuery UI Dialog documentation provides the following solution.

The jQuery UI dialog has close button in the titlebar has a CSS class of "ui-dialog-titlebar-close". To hide the close button, the "display" style for the close button needs to be set to "none".

To create a dialog with the close button hidden, define a CSS class where a child element with the "ui-dialog-titlebar-close" class is hidden. Then apply the CSS class to the dialog.

CSS to hide the close button

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

JavaScript to create the dialog and apply the "no-close" CSS class

$("#dialog").dialog({
  dialogClass: "no-close"
});

Example

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License