jQuery UI – Disable Title On Dialog

For some reason, this was turning out to be kind of hard to accomplish, and everyone on the internet wanted to do it with JavaScript hacks. My issue was if the JavaScript hack didn’t execute fast enough, causing the title to flash for just a second, so I’d much rather do it with CSS. Unfortunately, there are no built in ways to hide it in jQuery. However, there is an option you can pass in the .dialog() method: dialogClass. This places a custom class in the main div element, allowing you to do something like this:

[javascript]
function selectLocation()
{
$(‘#modalSelectLocation’).dialog({
modal: true,
dialogClass: ‘modalSelectLocation’
,buttons: {
Cancel: function(){
$(this).dialog(‘close’);
}
,Continue: function() {
alert(‘goto-buy’);
}

}
});
}
[/javascript]

with the css of:

[css]
.modalSelectLocation .ui-dialog-titlebar { display:none; }
[/css]

Tada! No more Title Bar. However, make sure to have some form of cancel button.