Hide Title bar and Show Close Button in jQuery Dialog

jquery css jquery-dialog

16,223

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

16,223

Author by

Bishan

#SOreadytohelp

Updated on July 10, 2022

Comments

Bishan almost 2 years
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 ?
Suresh Atta almost 11 years

@Bishan can you please check that css solution ??otherwise I'l delete this post soon :)
seemly almost 11 years

there is no such thing as display:visible
Bishan almost 11 years

where should i put this css ? on jquery.ui.dialog.css ?
Suresh Atta almost 11 years

@seemly My bad dude..sorry.Edited.Thanks for the spot.
Bishan almost 11 years

should i put $(".ui-dialog-titlebar-close").show(); in js file ?
Suresh Atta almost 11 years

let us continue this discussion in chat
Bishan almost 11 years

I have added this code. but close button is display in left side. not in right side.
andyb almost 11 years

Do you have an example of your code where this is happening? It is on the right side in my demo.
Bishan almost 11 years

Created Demo with my code. It is working properly. but in my pc, close button is display in left side.
Bishan almost 11 years

Here is a link to my new question about this.