How To: jQuery UI - Dialog With No Titlebar

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 no titlebar, define a CSS class where a child element with the "ui-dialog-titlebar" class is hidden. Then apply the CSS class to the dialog.

CSS to hide the titlebar

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

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

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

Example

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