CODEWITHSUNDEEP
javascriptjqueryjquery-uidialog
Imdad
Imdad

Reputation: 6032

jQuery UI dialog without a title bar but keep 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?

Upvotes: 12

Views: 12767

Answers (5)

gakuru
gakuru

Reputation: 111

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

Upvotes: 3

Dwayne Love
Dwayne Love

Reputation: 343

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

Upvotes: 0

kamlesh.bar
kamlesh.bar

Reputation: 1804

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

Upvotes: 5

Tomas
Tomas

Reputation: 59455

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

Upvotes: 0

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

Related Questions