Hide Title bar and Show Close Button in jQuery Dialog

Question

I have hide title bar in jQuery Dialog as below

$(".ui-dialog-titlebar").hide();

This also hide close button in Dialog. But i need to show close button on Dialog.

How can i do this ?

Answer 1

Adding the following CSS will hide the title text and style, leaving the close button in place - see demo.

.ui-dialog-title {
    display:none;
}

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

.ui-dialog .ui-dialog-titlebar-close {
    right:0;
}

However, if you want to change the style of the close button itself (as mentioned in your other question - Arrow in Bottom of jQuery Dialog) then I suggest asking another question since showing the closeText is still a problem when using a jQuery theme - see jQuery UI Dialog - Cannot see the closeText

Answer 2

This works for me:

(Assume your close button has id #close)

$(".ui-dialog-titlebar : not(#close)").hide();

Answer 3

Try to show the ui-dialog-titlebar-close class of dialog

$(".ui-dialog-titlebar-close").show();

And with css (what I am doing)

body .ui-dialog-titlebar-close{
   visibility=visible;
}

Answer 4

Try this one:

    $(".ui-dialog-titlebar").css('visibility','hidden');
    $(".ui-dialog-titlebar-close").css('visibility','visible');

See Demo

Answer 5

What about just set height to 0? Seemed work for my needs.

.ui-dialog-titlebar {
  height: 0;
}