CODEWITHSUNDEEP
jqueryjquery-ui
Loony2nz
Loony2nz

Reputation: 4701

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

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

Upvotes: 265

Views: 207998

Answers (23)

atazmin
atazmin

Reputation: 5687

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

Upvotes: 0

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

Reputation: 943

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

Upvotes: 0

controlZ
controlZ

Reputation: 1

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

Upvotes: 0

Firas Abd Alrahman
Firas Abd Alrahman

Reputation: 187

Try using

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

This will hide all dialogs titles

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

Upvotes: 8

jcromeros1987
jcromeros1987

Reputation: 137

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>

Upvotes: 2

Sampson
Sampson

Reputation: 268344

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.

Upvotes: 66

m4dd
m4dd

Reputation: 89

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

Upvotes: 4

Husrat Mehmood
Husrat Mehmood

Reputation: 2310

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

Upvotes: 1

mizar
mizar

Reputation: 2969

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.

Upvotes: 296

user2575051
user2575051

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

Upvotes: -1

Amirouche Douda
Amirouche Douda

Reputation: 1564

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

Upvotes: 58

Jacob
Jacob

Reputation: 4021

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

Upvotes: -1

user1712742
user1712742

Reputation: 49

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

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

Upvotes: 1

abdulkaderjeelani
abdulkaderjeelani

Reputation: 37

Try this

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

replace divid by corresponding id

Upvotes: 2

user616258
user616258

Reputation: 21

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.

Upvotes: 2

odedbd
odedbd

Reputation: 2375

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.

Upvotes: 7

Andrej Kaurin
Andrej Kaurin

Reputation: 11642

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

Upvotes: 4

ingredient_15939
ingredient_15939

Reputation: 3134

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.

Upvotes: 5

pdubbb1
pdubbb1

Reputation: 39

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

Upvotes: 3

Joffer
Joffer

Reputation: 1939

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

Upvotes: 1

Arun Vasudevan Nair
Arun Vasudevan Nair

Reputation: 41

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.

Upvotes: 4

Koder
Koder

Reputation: 159

This worked for me:

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

Upvotes: 15

Loony2nz
Loony2nz

Reputation: 4701

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.

Upvotes: 99

Related Questions