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 ?

Karyosome

@seemly tried this $(".ui-dialog-titlebar-close").show(); – Karyosome

Try like this: $(".ui-dialog-titlebar-close").css('visibility', 'visible'); – Gainly

@PriyaSunanthan not worked – Karyosome

can u fiddle ur code. – Gainly

@PriyaSunanthan jsfiddle.net/62yJ4 – Karyosome

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

Duffie

I have added this code. but close button is display in left side. not in right side. – Karyosome

Do you have an example of your code where this is happening? It is on the right side in my demo. – Duffie

Created Demo with my code. It is working properly. but in my pc, close button is display in left side. – Karyosome

Here is a link to my new question about this. – Karyosome

Answer 2

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

Bougie

@Karyosome can you please check that css solution ??otherwise I'l delete this post soon :) – Bougie

there is no such thing as display:visible – Oxyacetylene

where should i put this css ? on jquery.ui.dialog.css ? – Karyosome

@Oxyacetylene My bad dude..sorry.Edited.Thanks for the spot. – Bougie

should i put $(".ui-dialog-titlebar-close").show(); in js file ? – Karyosome

let us continue this discussion in chat – Bougie

Answer 3

This works for me:

(Assume your close button has id #close)

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

Shenika

Answer 4

Try this one:

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

See Demo

Gainly

Answer 5

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

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

Ultimately