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

Question

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

score 294 · Answer 1 · edited Aug 24 '13 at 03:04

294

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.

edited Aug 24 '13 at 03:04

Basic

26,321
24
115
201

answered Jan 25 '10 at 22:29

mizar

2,949
2
15
2

2

+1 Jonatan's solution doesn't work for particular dialog. Your's does. – cetnar Sep 08 '10 at 10:11
1

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. – Carlos Pinto Feb 23 '11 at 20:27
2

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 } – dimsuz Mar 16 '12 at 15:57
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. – Shanimal Apr 19 '13 at 21:35
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()`. – Andrew Jun 06 '15 at 20:21
1

dialogClass is deprecated in jquery v 1.12 and it does not affect the dialog object as intended. – Mini Fridge Oct 27 '16 at 20:49
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). – usr May 20 '17 at 13:01
2

The dialogClass option has been deprecated in favor of the classes option, using the ui-dialog property. – Sandeep Saroha Aug 01 '18 at 13:04

score 99 · Accepted Answer · edited Jun 21 '09 at 03:05

99

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.

edited Jun 21 '09 at 03:05

Sampson

265,109
74
539
565

answered Jun 21 '09 at 03:03

Loony2nz

4,691
6
28
31

3

...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. – Sampson Jun 21 '09 at 03:05
10

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. – Loony2nz Jun 21 '09 at 03:08
2

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 :) – Sampson Jun 21 '09 at 03:24
2

Is it just me or does #example not have scope over the dialog title? – Rio Aug 20 '09 at 19:29
+1: This worked for me too. I wonder why the .hide has to come after .dialog. Hmmm... – Vivian River Dec 03 '10 at 16:58
2

@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. – Jeremy Wiebe May 24 '11 at 21:53
Some of the other solutions are better. consider accepting them – yossi Mar 28 '14 at 02:06
1

To make this not global you can use the `appendTo` option in your dialogOpts. Then instead put `$("#appended_element .ui-dialog-titlebar").hide();` – Mike Aug 14 '14 at 06:15

Sampson · Answer 3 · 2015-06-08T03:30:18.183

66

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.

edited Jun 08 '15 at 03:30

answered Jun 21 '09 at 02:42

Sampson

265,109
74
539
565

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. – Loony2nz Jun 21 '09 at 02:51
2

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. – Sampson Jun 21 '09 at 02:54
3

When people talk about css too much, they spell-funny, don't they – bobobobo Jan 11 '10 at 01:03
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 – bobobobo Jan 11 '10 at 01:08
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. – Carlos Pinto Dec 09 '11 at 20:06
And that is the best way. – Flash Thunder Aug 04 '13 at 09:33
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: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS – Andrew Jun 06 '15 at 20:25
@Andrew 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. – Sampson Jun 08 '15 at 04:00

Amirouche Douda · Answer 4 · 2013-07-07T09:00:49.613

58

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

edited Jul 07 '13 at 09:00

answered Sep 18 '10 at 22:00

Amirouche Douda

1,564
1
21
30

8

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'); }); });` – Adrian P. Mar 09 '13 at 16:48
`$("#myDialog").dialog('open').siblings('.ui-dialog-titlebar').remove();` is the best answer in my opinion +1 for this line of code – Jaylen May 19 '15 at 18:48
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()`. – Andrew Jun 06 '15 at 20:22
Up vote because I have two divs, and I wanted to hide just one. – Marcus Becker Sep 25 '15 at 19:38

score 15 · Answer 5 · edited Sep 17 '11 at 23:47

15

This worked for me:

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

edited Sep 17 '11 at 23:47

Xavi

20,111
14
72
63

answered Feb 24 '11 at 11:49

Koder

159
1
2

1

This will hide the headers in *all* dialogs. My suggestion below (next reply) will do it just for the currently opening dialog. – ingredient_15939 May 14 '12 at 16:44
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. – Gwasshoppa Aug 08 '16 at 00:14

Firas Abd Alrahman · Answer 6 · 2017-02-03T14:19:44.590

8

Try using

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

This will hide all dialogs titles

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

edited Feb 03 '17 at 14:19

answered Aug 31 '13 at 09:19

Firas Abd Alrahman

181
3
10

score 7 · Answer 7 · edited Jun 21 '12 at 17:57

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.

score 5 · Answer 8 · answered Jan 11 '12 at 16:56

5

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.

answered Jan 11 '12 at 16:56

ingredient_15939

3,022
7
35
55

2

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. – Chris Porter Aug 24 '12 at 21:27

score 4 · Answer 9 · answered May 16 '12 at 21:19

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

score 4 · Answer 10 · answered Sep 02 '14 at 18:21

4

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

answered Sep 02 '14 at 18:21

m4dd

89
1
2
7

score 4 · Answer 11 · edited Sep 17 '11 at 23:48

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.

edited Sep 17 '11 at 23:48

Xavi

20,111
14
72
63

answered Jun 04 '10 at 17:50

Arun Vasudevan Nair

41
2

1

Yes, this was mizar's solution -- posted 6 months before yours. – Kirk Woll Mar 09 '11 at 23:08
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. – Arun Vasudevan Nair Sep 05 '17 at 04:54

score 3 · Answer 12 · answered Oct 13 '11 at 13:35

3

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

answered Oct 13 '11 at 13:35

pdubbb1

39
1

score 2 · Answer 13 · edited Aug 17 '12 at 17:39

2

Try this

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

replace divid by corresponding id

edited Aug 17 '12 at 17:39

Alfred

21,058
61
167
249

answered Jun 28 '10 at 13:11

abdulkaderjeelani

37
1

score 2 · Answer 14 · answered Aug 26 '15 at 17:55

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>

score 2 · Answer 15 · edited Aug 17 '12 at 17:39

2

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.

edited Aug 17 '12 at 17:39

Alfred

21,058
61
167
249

answered Apr 13 '11 at 12:07

user616258

21
1

score 1 · Answer 16 · edited Oct 03 '12 at 14:54

1

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

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

edited Oct 03 '12 at 14:54

andrewsi

10,807
132
35
51

answered Oct 03 '12 at 14:43

user1712742

49
2

score 1 · Answer 17 · answered Apr 18 '14 at 09:25

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

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. — Chef_Code, May 03 '17 at 19:15

score 1 · Answer 18 · answered Oct 02 '11 at 00:52

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

score 0 · Answer 19 · edited Mar 31 '18 at 14:15

0

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 :(

edited Mar 31 '18 at 14:15

ErvalhouS

4,178
1
22
38

answered Mar 31 '18 at 13:42

controlZ

1

score 0 · Answer 20 · answered Nov 30 '19 at 16:32

0

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

answered Nov 30 '19 at 16:32

Олег Всильдеревьев

903
10
11

score 0 · Answer 21 · answered Aug 04 '20 at 21:25

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

score -1 · Answer 22 · answered Feb 28 '13 at 15:29

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

score -1 · Answer 23 · answered Aug 23 '13 at 16:44

-1

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

answered Aug 23 '13 at 16:44

user2575051

1
1

Making modifications like that causes terrible upgrade pain. – usr May 20 '17 at 13:03

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

23 Answers23

Linked

Related