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 ?

Try like this: $(".ui-dialog-titlebar-close").css('visibility', 'visible'); — Priya Sunanthan, Jul 16 '13 at 09:58

score 7 · Accepted Answer · edited May 23 '17 at 12:00

7

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

edited May 23 '17 at 12:00

Community

1
1

answered Jul 16 '13 at 10:55

andyb

43,435
12
121
150

I have added this code. but close button is display in left side. not in right side. – Bishan Jul 16 '13 at 11:18
Do you have an example of your code where this is happening? It is on the right side in my demo. – andyb Jul 16 '13 at 12:26
Created [Demo](http://jsfiddle.net/NK2qm/2/) with my code. It is working properly. but in my pc, close button is display in left side. – Bishan Jul 17 '13 at 04:13
Here is a [link](http://stackoverflow.com/questions/17691104/show-close-button-in-right-side-of-jquery-dialog) to my new question about this. – Bishan Jul 17 '13 at 04:25

Suresh Atta · Answer 2 · 2013-07-16T09:20:43.707

0

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

edited Jul 16 '13 at 09:20

answered Jul 16 '13 at 09:14

Suresh Atta

120,458
37
198
307

@Bishan can you please check that css solution ??otherwise I'l delete this post soon :) – Suresh Atta Jul 16 '13 at 09:17
there is no such thing as display:visible – seemly Jul 16 '13 at 09:19
where should i put this `css` ? on `jquery.ui.dialog.css` ? – Bishan Jul 16 '13 at 09:21
@seemly My bad dude..sorry.Edited.Thanks for the spot. – Suresh Atta Jul 16 '13 at 09:23
should i put `$(".ui-dialog-titlebar-close").show();` in js file ? – Bishan Jul 16 '13 at 09:24
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/33543/discussion-between-suresh-atta-and-bishan) – Suresh Atta Jul 16 '13 at 09:24

score 0 · Answer 3 · answered Jul 16 '13 at 09:17

0

This works for me:

(Assume your close button has id #close)

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

answered Jul 16 '13 at 09:17

TheScarecrow

153
9

score 0 · Answer 4 · answered Jul 16 '13 at 11:24

0

Try this one:

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

See Demo

answered Jul 16 '13 at 11:24

Priya Sunanthan

441
1
8
18

score 0 · Answer 5 · answered Nov 02 '15 at 15:49

0

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

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

answered Nov 02 '15 at 15:49

thejtluv

1

Hide Title bar and Show Close Button in jQuery Dialog

5 Answers5

Linked