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.

1 thought on “jQuery UI – Disable Title On Dialog

  1. I haven?¦t checked in here for a while because I thought it was getting boring, but the last few posts are great quality so I guess I will add you back to my everyday bloglist. You deserve it my friend 🙂

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close