jquery UI dialog: how to initialize without a title bar?

Question

Is it possible to open a jQuery UI Dialog without a title bar?

Thanks!

Answer 1

I believe you can hide it with css:

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

Or, specific to a particular item:

div#example .ui-dialog-titlebar { display:none; }

Checkout "Theming" the Dialog. I don't believe there is a dialog-option to not-render the title bar unfortunately.

Answer 2

I figured out a fix for dynamically removing the title bar.

$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();

This will remove all elements with the class 'ui-dialog-titlebar' after the dialog box is rendered.

Answer 3

I think that the best solution is to use the option dialogClass.

An extract from jquery UI docs:

during init : $('.selector').dialog({ dialogClass: 'alert' });

or if you want after init. :

 $('.selector').dialog('option', 'dialogClass', 'alert');

So i created some dialog with option dialogClass='noTitleStuff' and the css like that:

.noTitleStuff .ui-dialog-titlebar {display:none}

too simple !! but i took 1 day to think why my previous id->class drilling method was not working. In fact when you call .dialog() method the div you transform become a child of another div (the real dialog div) and possibly a 'brother' of the titlebar div, so it's very difficult to try finding the latter starting from former.

Answer 4

You can use jquery to hide titlebar after using dialogClass when initializing the dialog.

during init :

$('.selector).dialog({

    dialogClass: 'yourclassname'

});

$('.yourclassname div.ui-dialog-titlebar').hide();

By using this method, you don't need to change your css file, and this is dynamic too.

Answer 5

Actually there's yet another way to do it, using the dialog 'widget' directly:

You can get the Dialog Widget thus

$("#example").dialog(dialogOpts); $dlgWidget = $('#example').dialog('widget');

and then do

$dlgWidget.find(".ui-dialog-titlebar").hide();

to hide the titlebar within that dialog only

and in a single line of code (I like chaining):

$('#example').dialog('widget').find(".ui-dialog-titlebar").hide();

No need to add an extra class to the dialog this way, just go at it directly. Workss fine for me.

Answer 6

Try this

$("#ui-dialog-title-divid").parent().hide();

replace "divid" by corresponding id

Answer 7

I use this in my projects

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();