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

Question

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

Answer 1

This worked for me:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },

Answer 2

I use this in my projects

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

Answer 3

The one thing I discovered when hiding the Dialog titlebar is that, even if display is none, screen readers still pick it up and will read it. If you already added your own title bar, it will read both, causing confusion.

What I did was removed it from the DOM using $(selector).remove(). Now screen readers (and every one else) will not see it because it no longer exists.

Answer 4

Have you tried solution from jQuery UI docs? https://api.jqueryui.com/dialog/#method-open

As it say you can do like this...

In CSS:

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

In JS:

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

Answer 5

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 6

I believe you can hide it with CSS:

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

Alternatively, you can apply this to specific dialogs with the dialogClass option:

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

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

Check out "Theming" the Dialog. The above suggestion makes use of the dialogClass option, which appears to be on it's way out in favor of a new method.