How to remove jQuery-ui dialog title bar?

Question

I am trying to hide jQuery-ui dialog's title bar but keep the close button in the title bar visible. I have searched lots of post on stackoverflow like this one. In each post the title bar is hidden but the space taken by the bar is still there. I want to remove that space also but without removing the close button.

How can i do this?

Answer 1

Based on this answer:

Use .dialog("widget") option to locate the div wrapper for the dialog. The wrapper contains all the markup used for the dialog including header, title bar and close button; and the dialog content itself. Here is one way to invoke the method and hide the title bar:

$("#id").dialog({
    autoOpen: false
}).dialog("widget").find(".ui-dialog-title").hide();​

You can then use CSS to eliminate unnecessary margin, border and padding. For example:

.ui-dialog-titlebar {
    float: right;
    border: 0;
    padding: 0;
}
.ui-dialog-titlebar-close {
    top: 0;
    right: 0;
    margin: 0;
    z-index: 999;
}

Here is a demo based on above code plus it adds the necessary styles using jQuery.