jQuery UI dialog without a title bar but keep the close button

Question

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?

Solution 1

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

Solution 2

This works too

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

Solution 3

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