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

JqueryJquery Ui

Jquery Problem Overview

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

Jquery Solutions

Solution 1 - Jquery

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.

Solution 2 - Jquery

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.

Solution 3 - Jquery

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.

Solution 4 - Jquery

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

Solution 5 - Jquery

This worked for me:

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

Solution 6 - Jquery

Try using

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

This will hide all dialogs titles

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

Solution 7 - Jquery

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.

Solution 8 - Jquery

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.

Solution 9 - Jquery

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.

Solution 10 - Jquery

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

Solution 11 - Jquery

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

Solution 12 - Jquery

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

Solution 13 - Jquery

Try this

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

replace divid by corresponding id

Solution 14 - Jquery

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.

Solution 15 - Jquery

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>

Solution 16 - Jquery

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

Solution 17 - Jquery

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

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

Solution 18 - Jquery

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

Solution 19 - Jquery

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

Solution 20 - Jquery

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

Solution 21 - Jquery

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

Solution 22 - Jquery

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

Solution 23 - Jquery

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

Categories
Recommended Jquery Solutions
Recommended Jquery Ui Solutions

Previous Solution:

Nullable types and the ternary operator: why is `? 10 : null` forbidden?

C#.NetNullableConditional Operator

Next Solution:

How do I mock an open used in a with statement (using the Mock framework in Python)?

PythonMockingWith Statement

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionLoony2nzView Question on Stackoverflow
Solution 1 - JquerymizarView Answer on Stackoverflow
Solution 2 - JqueryLoony2nzView Answer on Stackoverflow
Solution 3 - JquerySampsonView Answer on Stackoverflow
Solution 4 - JqueryAmirouche DoudaView Answer on Stackoverflow
Solution 5 - JqueryKoderView Answer on Stackoverflow
Solution 6 - JqueryFiras Abd AlrahmanView Answer on Stackoverflow
Solution 7 - JqueryodedbdView Answer on Stackoverflow
Solution 8 - Jqueryingredient_15939View Answer on Stackoverflow
Solution 9 - JqueryArun Vasudevan NairView Answer on Stackoverflow
Solution 10 - JqueryAndrej KaurinView Answer on Stackoverflow
Solution 11 - Jquerym4ddView Answer on Stackoverflow
Solution 12 - Jquerypdubbb1View Answer on Stackoverflow
Solution 13 - JqueryabdulkaderjeelaniView Answer on Stackoverflow
Solution 14 - Jqueryuser616258View Answer on Stackoverflow
Solution 15 - Jqueryjcromeros1987View Answer on Stackoverflow
Solution 16 - JqueryJofferView Answer on Stackoverflow
Solution 17 - Jqueryuser1712742View Answer on Stackoverflow
Solution 18 - JqueryProgrammingNinjaView Answer on Stackoverflow
Solution 19 - JquerycontrolZView Answer on Stackoverflow
Solution 20 - JqueryОлег ВсильдеревьевView Answer on Stackoverflow
Solution 21 - JqueryatazminView Answer on Stackoverflow
Solution 22 - JqueryJacobView Answer on Stackoverflow
Solution 23 - Jqueryuser2575051View Answer on Stackoverflow