12

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?

Community
  • 1
  • 1
Imdad
  • 5,942
  • 4
  • 33
  • 53

5 Answers5

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" 
});
kamlesh.bar
  • 1,774
  • 19
  • 38
3
$(function() {
    $( "#dialog" ).dialog();
    $(".ui-dialog-titlebar").removeClass('ui-widget-header');
});
gakuru
  • 111
  • 3
  • 6
2

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');
     });
Jacob
  • 3,580
  • 22
  • 82
  • 146
0

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" 
});
Tomas
  • 57,621
  • 49
  • 238
  • 373
0

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

Dwayne Love
  • 323
  • 3
  • 10
  • This is answer is same as the update of @kamlesh.bar but, it is in css. It will do the change for all dialogs. If someone wants to do that then it is good. If someone wants only specific dialog to behave this way then it is not good. – Imdad Aug 01 '17 at 10:27
  • @Imdad the key thing here isn't the fact that it's CSS. It's that I changed the entire background property. Editing the background-color did not produce the expected results in my application. – Dwayne Love Aug 02 '17 at 13:07