I want to remove the titelbar of the jQuery dialog. But I want to keep the close (cross) button there.

I found this question:

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

The answers there explains how to remove titlebar, but if I do that it also removes the close button. There are other links too but they all do the same. They just hide the whole titlebar along with the close button.

Is there any solution that hides the title bar while keeping the close button?

I want to remove the titelbar of the jQuery dialog. But I want to keep the close (cross) button there.

I found this question:

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

The answers there explains how to remove titlebar, but if I do that it also removes the close button. There are other links too but they all do the same. They just hide the whole titlebar along with the close button.

Is there any solution that hides the title bar while keeping the close button?

• javascript
• jquery
• jquery-ui
• dialog

• By cross button I assume you mean the close button? I think you would have to remove the title bar and then add your own close button to the top corner of the dialog. – Chad Ferguson Commented May 24, 2012 at 13:09
• Yes, I mean close button – Imdad Commented May 24, 2012 at 13:12

5 Answers 5

Use this to remove the titelbar of the jQuery dialog and not the close button

 $(function() {
    $( "#dialog" ).dialog();
    $("#ui-dialog-title-dialog").hide();
    $(".ui-dialog-titlebar").removeClass('ui-widget-header');
 });

for newer version jquery UI > 1.10.3

$("#dialog .ui-dialog-titlebar").css({ 
     "background-color" : "transparent", 
     "border" : "0px none" 
});

$(function() {
    $( "#dialog" ).dialog();
    $(".ui-dialog-titlebar").removeClass('ui-widget-header');
});

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

I think the easiest and most robust solution (the other ones here do not work for 1.10.3 since they assume things that can change") is to directly set the CSS style for it that you expect it to have.

$("#dialog .ui-dialog-titlebar").css({ 
     "background-color" : "transparent", 
     "border" : "0px none" 
});

I tried the other solutions here that suggested changing the background-color attribute and that did not help. The solution for me was changing the background attribute to transparent.

.ui-dialog-titlebar { background: transparent; border: 0 none; }