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

Question

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

Wingback

Answer 1

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.

Wingback

...and the css option removes any chance of them showing up before. I'm not sure I see any benefit in your alternative. In reality, your alternative is going to do what I did, only adding an extra step. Going the CSS-Route will be faster. – Hazzard

Well my option will only remove the title bar for this one dialog. If I used your option, I'd remove the title bar for all my dialogs. I can see in the future that I'll need a title bar. – Wingback

So you include your element within the css-rule: #example .ui-dialog-titlebar.... It will work either way; but the Javascript is going to set the css eventually, so I don't see the benefit of not doing it in css to begin with. It really doesn't make much of a difference - whatever you are most comfortable with :) – Hazzard

Is it just me or does #example not have scope over the dialog title? – Gon

+1: This worked for me too. I wonder why the .hide has to come after .dialog. Hmmm... – Disfigurement

@Rice Flour Cookies: The .hide() has to come after .dialog() because .dialog() is what injects the markup for the dialog into the page. Prior to that call the page does not have any dialog elements yet. – Bornite

Some of the other solutions are better. consider accepting them – Narcotic

To make this not global you can use the appendTo option in your dialogOpts. Then instead put $("#appended_element .ui-dialog-titlebar").hide(); – Jempty

Answer 2

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

An extract from jquery UI docs:

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

or if you want after init. :

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

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.

Licorice

+1 Jonatan's solution doesn't work for particular dialog. Your's does. – Kerbela

I agree with mizar. This is the best solution because of the fact that this one allows you to be specific to those dialog boxes that only have the class that you defined. – Darb

the only downside of this method is that Chrome adds a vertical scroll bar for such a dialog when it's configured as modal, because somehow jQuery starts to incorrectly calculate its ui-widget-overlay height... I didn't dig deeper, and didn't find a quick fix apart from hacky { overflow: hidden } – Gerfen

i was a little confused by the "alert" dialogClass in the dialog init/post init, then .noTitleStuff class in the css. but +1 for concept. you should fix this post. – Rheotropism

As of today, the titlebar is a sibling div previous to the one transformed into a dialog. So you could do something like $("#divId").prev().hide(), or $("#divId").prev(".ui-dialog-titlebar").hide(). – Brandish

dialogClass is deprecated in jquery v 1.12 and it does not affect the dialog object as intended. – Ezmeralda

This is best since it's supported. I don't think jQuery UI officially supports deleting random elements from the DOM that it created (the title bar). – Lacylad

The dialogClass option has been deprecated in favor of the classes option, using the ui-dialog property. – Balbur

Answer 3

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.

Hazzard

Yes I guess that would work, but that's a global option. I was wondering if there was a way to do it with options. I guess I can do some pre rendering jquery'ness to remove the title div before it's shown. – Wingback

No. I don't believe there is an option to remove it. By default it is the close-button, so in a sense it's almost bad-design. – Hazzard

When people talk about css too much, they spell-funny, don't they – Burmaburman

Also you probably shouldn't remove it since you can't move the dialog anymore after that. Probably better to put no text in it and restyle it so it is dark and thin – Burmaburman

If you have some other event that triggers the close method of the dialog, then there can be cases where you don't need the close button on the title bar. – Darb

And that is the best way. – Clifton

As of today, the title bar is a div previous to the one with your id, so this method doesn't work. You should use the prev() function to find it, like $("#divId").prev().hide(). On a side note, if you are selecting by id, it's recommended NOT to include the tag, the id is unique already. Source: developer.mozilla.org/en-US/docs/Web/Guide/CSS/… – Brandish

@Brandish Thank you for the suggestions. I spent a little time playing with modern versions of jQuery UI, searching their change logs, and reading through some of the relevant commit logs. I have modified my answer, which I believe reflects a better contemporary solution to this issue. – Hazzard

Answer 4

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();

Seriocomic

Even better: remove titlebar but not the close button. Keep its functionality. $(document).ready(function() { $('#video').click(function(){ $( "#dialog" ).dialog().siblings('.ui-dialog-titlebar').removeClass('ui-widget-header'); }); }); – Haematoxylin

$("#myDialog").dialog('open').siblings('.ui-dialog-titlebar').remove(); is the best answer in my opinion +1 for this line of code – Anemoscope

Or you could just look for the previous sibling, which is the title bar: .ui-dialog-titlebar: $("#myDialog").prev().hide() or $("#myDialog").prev(".ui-dialog-titlebar").hide(). – Brandish

Up vote because I have two divs, and I wanted to hide just one. – Fieldfare

Answer 5

This worked for me:

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

Sisely

This will hide the headers in all dialogs. My suggestion below (next reply) will do it just for the currently opening dialog. – Overdrive

Nice ... This means I dont have to make every dialog hidden because of the base css class... also means I dont have to set up my dialog separately and then remove the title. – Scapular

Answer 6

Try using

$("#mydialog").closest(".ui-dialog-titlebar").hide();

This will hide all dialogs titles

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

Italian

Answer 7

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.

Splenectomy

Answer 8

I find it more efficient, and more readable, to use the open event, and hide the title bar from there. I don't like using page-global class name searches.

open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }

Simple.

Overdrive

This is the method I went with but used the create: function so that it is always hidden, not just when the dialog is shown. I also changed it to a .remove() instead of .hide() to make sure it is gone from the dialog completely. – Heintz

Answer 9

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.

Bumpy

Yes, this was mizar's solution -- posted 6 months before yours. – Cheltenham

I agree, but then you will have to add a CSS entry also which complicates the solution. My suggestion takes care of the problem using only jQuery. – Bumpy

Answer 10

I like overriding jQuery widgets.

(function ($) {
    $.widget("sauti.dialog", $.ui.dialog, {
        options: {
            headerVisible: false
        },
        _create: function () {
            // ready to generate button
            this._super("_create"); // for 18 would be $.Widget.prototype._create.call(this);
            // decide if header is visible
            if(this.options.headerVisible == false)
                this.uiDialogTitlebar.hide();
        },
        _setOption: function (key, value) {
            this._super(key, value); // for 1.8 would be $.Widget.prototype._setOption.apply( this, arguments );
            if (key === "headerVisible") {
                if (key == false)
                    this.uiDialogTitlebar.hide();
                else
                    this.uiDialogTitlebar.show();
                return;
            }
        }
    });
})(jQuery);

So you can now setup if you want to show title bar or not

   $('#mydialog').dialog({
      headerVisible: false // or true
});

Kristiekristien

Answer 11

If you have multiple dialog, you can use this:

$("#the_dialog").dialog({
        open: function(event, ui) { 
            //hide titlebar.
            $(this).parent().children('.ui-dialog-titlebar').hide();
        }
    });

Brasier

Answer 12

This is the easiest way to do it and it will only remove the titlebar in that one specific dialog;

$('.dialog_selector').find('.ui-dialog-titlebar').hide();

Baptistry

Answer 13

Try this

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

replace divid by corresponding id

Solemnity

Answer 14

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.

Loggia

Answer 15

This next form fixed me the problem.

$('#btnShow').click(function() {
  $("#basicModal").dialog({
    modal: true,
    height: 300,
    width: 400,
    create: function() {
      $(".ui-dialog").find(".ui-dialog-titlebar").css({
        'background-image': 'none',
        'background-color': 'white',
        'border': 'none'
      });
    }
  });
});

#basicModal {
  display: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<div id="basicModal">
  Here your HTML content
</div>
<button id="btnShow">Show me!</button>

Penoyer

Answer 16

I think the cleanest way of doing it would be to create a new myDialog widget, consisting of the dialog widget minus the title bar code. Excising the title bar code looks straightforward.

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

Mohair

Answer 17

This worked for me to hide the dialog box title bar:

$(".ui-dialog-titlebar" ).css("display", "none" );

Miranda

Answer 18

This is How it can be done.

Go to themes folder--> base--> open jquery.ui.dialog.css

Find

Followings

if you don't want to display titleBar then simply set display:none as i did in the following.

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

Samilarly for title as well.

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

Now comes close button you can also set it none or you can set its

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;

   display:none;

}

I did lots of search but nothing then i got this idea in my mind. However this will effect entire application to don't have close button,title bar for dialog but you can overcome this as well by using jquery and adding and setting css via jquery

here is syntax for this

$(".specificclass").css({display:normal})

Capstan

This works and is helpful to understand that this can be done, but if you have multiple .dialogs() and only 1 or so need these settings, then there are alternative routes than applying the settings globally this way. – Gareth

Answer 19

For me, I still wanted to use the re-sizable corners, just didn't want so see the diagonal lines. I used

$(".ui-resizable-handle").css("opacity","0");

Just realized I was commenting on the wrong question. Living up to my namesake :(

Hymnist

Answer 20

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"
});

Kev

Answer 21

This worked for me

 open: function(event, ui) {
            $(".ui-dialog-titlebar", $(this).parent())
              .hide();

Full

$speedbump.dialog({
  dialogClass: 'speedbump-container',
  autoOpen: false,
  closeOnEscape: false,
  modal: true,
  resizable: false,
  draggable: false,
  create: function () {        
      $speedbump
        .closest('.ui-dialog')
        .attr('id', 'speedbump-container');
  },
  open: function(event, ui) {
    $(".ui-dialog-titlebar", $(this).parent())
      .hide();
}

Flunky

Answer 22

You could remove the bar with the close icon with the techinques described above and then add a close icon yourself.

CSS:

.CloseButton {
background: url('../icons/close-button.png');   
width:15px;
height:15px;
border: 0px solid white;
top:0;
right:0;
position:absolute;
cursor: pointer;
z-index:999;
}

HTML:

var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";

//append this div to the div holding your content

JS:

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });

Hendrika

Answer 23

go to your jquery-ui.js (in my case jquery-ui-1.10.3.custom.js) and search for this._createTitlebar(); and comment it.

now anyone of yours dialog will appear with headers. If you want to customize the header just go to _createTitlebar(); and edit the code inside.

by

Kura

Making modifications like that causes terrible upgrade pain. – Lacylad