How to remove close button on the jQuery UI dialog?

Question

How do I remove the close button (the X in the top-right corner) on a dialog box created by jQuery UI?

Check the documentation, first sub-title: http://api.jqueryui.com/dialog/ — Mike Cole, Mar 18 '13 at 21:18
@MikeCole The documentation is for 1.10 - I think if you want to hide the close button in any lower versions you'll need to do something like the answers below. — Jarrett, Feb 10 '14 at 16:46
Use "ui-dialog-titlebar-close": "display:none;" when we setup the jqueryui modal dialog — MarcoZen, Dec 25 '17 at 18:07

score 724 · Accepted Answer · edited Jul 29 '19 at 15:10

724

I have found this worked in the end (note the third line overriding the open function which find the button and hides it):

$("#div2").dialog({
    closeOnEscape: false,
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
    }
});

To hide the close button on all dialogs you can use the following CSS too:

.ui-dialog-titlebar-close {
    visibility: hidden;
}

edited Jul 29 '19 at 15:10

antishok

2,910
16
21

answered May 22 '09 at 11:20

Robert MacLean

38,975
25
98
152

123

`$(".ui-dialog-titlebar-close", ui).hide();` to hide the button for **this** dialog only. – Anthony Serdyukov Feb 08 '10 at 11:42
@Johnldol, do you use it in the context of the Robert's answer above? It should work since `ui` is defined as a function argument. See also http://api.jquery.com/jQuery/#jQuery1 – Anthony Serdyukov May 24 '10 at 02:14
71

I couldn't get it to work from the ui parameter either. I ended up using: $(".ui-dialog-titlebar-close", $(this).parent()).hide(); – Nigel Jun 08 '10 at 16:00
1

why not use `$(this).closest('.ui-dialog-titlebar-close').hide()` – RobertPitt Mar 14 '11 at 16:25
72

@Anton Just want to point out that just specifying 'ui' does not work. you have to use 'ui.dialog'. so the correct line would be $(".ui-dialog-titlebar-close", ui.dialog).hide(); – Bradley Mountford May 26 '11 at 19:51
@Bradley it worked for me using `ui` only. `ui.dialog` didn't. Tested on IE8/Firefox3.6. – Carcamano Jul 13 '11 at 14:38
@Carcamano interesting. I'm betting its a version thing with jqui. Unfortunately, I don't know what version I was using at the time of my test. – Bradley Mountford Jul 13 '11 at 20:38
22

@Bradley. ui didn't work for me, ui.dialog did but applied on each instances. To have ot working applied to only the one the open function is defined for I had to do this: $(".ui-dialog-titlebar-close", this.parentNode).hide(); – Nabab Oct 22 '11 at 16:28
14

`open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }` – opengrid Feb 15 '12 at 21:44
Was struggling with this also: `open: function(event, ui) { $((event.target)).parent('.ui-dialog').find('.ui-dialog-titlebar-close').hide(); }` – Volker Rose Jun 29 '12 at 10:09
@Nabab - This worked for the targetted instance. Good work.. $(".ui-dialog-titlebar-close", this.parentNode).hide(); – pvaju896 Oct 30 '12 at 06:21
2

Can anyone explain the discrepancies on `ui`? Why `ui` or `ui.dialog` or `$(this).parent`. Better yet, can anyone point us to JQuery UI documentation describing what to expect as values for `event` and `ui`? – Snekse Dec 11 '12 at 21:44
2

hiding it does not prevent it from receiving keypress events. hitting enter could still close the dialog. why not .remove()? – jedierikb Mar 01 '13 at 16:36
I'm using this successfully, but when I also use $(document).tooltip() I find that the "close" tooltip intermittently shows up. Anyone know how to prevent it completely? – Scott Anderson Mar 04 '13 at 19:26
3

I prefer $(this).parent().find(".ui-dialog-titlebar-close").hide(); to $(".ui-dialog-titlebar-close", $(this).parent()).hide() – Hans May 02 '13 at 22:15
Using $(".ui-dialog-titlebar-close").css('display','none') works better than hide(). The answer offereed by @David on Mar 14, 2011 is much more reliable and easier to use across multiple dialogs. – carruthd Jul 29 '13 at 20:10
5

Per the documentation - http://api.jqueryui.com/dialog/#event-open - "Note: The ui object is empty but included for consistency with other events." So I don't see how (ui.dialog || ui) would ever be a good context. This is apparent when you open a dialog within a dialog, it is selecting all open dialogs. I ended up with the same as Hans: $(this).parent().find(".ui-dialog-titlebar-close").hide(); – user210757 Aug 30 '13 at 17:48
Note that if you have autoOpen: true then this doesn't work, use David or Salman A's answer instead – user227353 Apr 10 '14 at 16:45
@jedierikb I'm surprised your solution does not have many up votes. Yours was THE solution for me. – Jul 13 '14 at 15:08
We were resolving deferred objects within the dialog button click handlers. That was happening before we were closing the dialog. Resolving the deferred was initiating opening another dialog which was leading to the error. – lexabug Jul 15 '19 at 16:25
in my case, I was not able to access ui.dialog so I used $.ui.dialog – Uttam Ughareja Dec 12 '19 at 08:21

score 371 · Answer 2 · edited Feb 07 '14 at 16:23

371

Here is another option just using CSS that does not over ride every dialog on the page.

The CSS

.no-close .ui-dialog-titlebar-close {display: none }

The HTML

<div class="selector" title="No close button">
    This is a test without a close button
</div>

The Javascript.

$( ".selector" ).dialog({ dialogClass: 'no-close' });

Working Example

edited Feb 07 '14 at 16:23

Salman A

262,204
82
430
521

answered Mar 14 '11 at 16:10

David

41,209
3
17
14

6

I like this approach because I can use it alongside things like: .noTitleDlg .ui-dialog-titlebar {display:none} in CSS to build up the way I want my dialog to appear and behave and then just set the dialogClass accordingly. – A. Murray Sep 09 '11 at 09:29
11

very clean solution... +1 for not involving additional js functionality to remove the button. – Bongs Jan 23 '12 at 15:23
2

Great idea. Comes in handy to target a specific dialog in situations where you use the same open method for all dialogs, and it is not very practical to change it for a specific instance. – ZolaKt Sep 13 '12 at 23:28
3

My favorite solution. I was thinking something like this would be the best approach. Thanks for having it already coded up here. Building upon this, I like to use this variation which will take the class attribute of the dialog's content div, into which I can put the "no-close" class: `dialogClass : $("#my-dialog-id").attr("class"),` – Mr. Lance E Sloan Dec 16 '12 at 14:47
1

This solution allows closing with escape, if you want to prevent closing on escape use: ```$( ".selector" ).dialog({ dialogClass: 'no-close' , closeOnEscape: false,});``` – Mladen Adamovic Apr 29 '20 at 06:11

score 128 · Answer 3 · edited Mar 25 '13 at 05:24

128

the "best" answer will not be good for multiple dialogs. here is a better solution.

open: function(event, ui) { 
    //hide close button.
    $(this).parent().children().children('.ui-dialog-titlebar-close').hide();
},

edited Mar 25 '13 at 05:24

Derek 朕會功夫

92,235
44
185
247

answered Nov 26 '09 at 10:38

Earl

1,289
1
8
2

24

This is more complicated than you need. `$(".ui-dialog-titlebar-close", $(this).parent()).hide();` – Kevin Panko Jan 25 '12 at 19:11
@KevinPanko your suggestion works well when using the example provided by the jquery ui demo site with ASP.NET v2.0 in an .aspx page. http://jqueryui.com/demos/dialog/modal-form.html – Matthew Dally Feb 14 '12 at 13:53
6

.closest('.ui-dialog') is better than assuming a parent. – technomage Jun 01 '12 at 19:19

score 90 · Answer 4 · edited Mar 20 '19 at 09:18

90

You can use CSS to hide the close button instead of JavaScript:

.ui-dialog-titlebar-close{
    display: none;
}

If you don't want to affect all the modals, you could use a rule like

.hide-close-btn .ui-dialog-titlebar-close{
    display: none;
}

And apply .hide-close-btn to the top node of the dialog

edited Mar 20 '19 at 09:18

Ruan Mendes

90,375
31
153
217

answered May 22 '09 at 07:58

Gordian Yuan

4,750
6
29
35

3

This answer was easy and straightforward. It applies, however, only if you wish to disable the button for all dialogs. – Mark Brittingham Jan 02 '14 at 18:14
@MarkBrittingham You can just apply a custom CSS class to your modal and to the selector, then this will apply to whoever you want – Ruan Mendes Mar 20 '19 at 09:16

score 54 · Answer 5 · answered Mar 19 '13 at 12:26

As shown on the official page and suggested by David:

Create a style:

.no-close .ui-dialog-titlebar-close {
    display: none;
}

Then, you can simply add the no-close class to any dialog in order to hide it's close button:

$( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [{
        text: "OK",
        click: function() {
            $( this ).dialog( "close" );
        }
    }]
});

score 42 · Answer 6 · answered Nov 26 '10 at 19:04

42

I think this is better.

open: function(event, ui) {
  $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
}

answered Nov 26 '10 at 19:04

Miguel Galante

1,689
1
14
13

Issue is it occasionally hides close button for other dialogues as well. how to prevent that . – Zaveed Abbasi Oct 19 '17 at 13:25
Even Using open: function(event, ui) { $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').show(); } doesn't work. – Zaveed Abbasi Oct 19 '17 at 13:26

Salman A · Answer 7 · 2015-08-04T10:02:56.130

Once you have called .dialog() on an element, you can locate the close button (and other dialog markup) at any convenient time without using event handlers:

$("#div2").dialog({                    // call .dialog method to create the dialog markup
    autoOpen: false
});
$("#div2").dialog("widget")            // get the dialog widget element
    .find(".ui-dialog-titlebar-close") // find the close button for this dialog
    .hide();                           // hide it

Alternate method:

Inside dialog event handlers, this refers to the element being "dialogged" and $(this).parent() refers to the dialog markup container, so:

$("#div3").dialog({
    open: function() {                         // open event handler
        $(this)                                // the element being dialogged
            .parent()                          // get the dialog widget element
            .find(".ui-dialog-titlebar-close") // find the close button for this dialog
            .hide();                           // hide it
    }
});

FYI, dialog markup looks like this:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
    <!-- ^--- this is the dialog widget -->
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <span class="ui-dialog-title" id="ui-dialog-title-dialog">Dialog title</span>
        <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
    </div>
    <div id="div2" style="height: 200px; min-height: 200px; width: auto;" class="ui-dialog-content ui-widget-content">
        <!-- ^--- this is the element upon which .dialog() was called -->
    </div>
</div>

Demos here

Great!! This allows showing/hiding of the close button after the dialog has already been initialized. — kRiZ, Aug 05 '20 at 08:02

score 29 · Answer 8 · answered Apr 12 '12 at 08:17

29

Robert MacLean's answer did not work for me.

This however does work for me:

$("#div").dialog({
   open: function() { $(".ui-dialog-titlebar-close").hide(); }
});

answered Apr 12 '12 at 08:17

FLY

2,379
5
29
40

score 9 · Answer 9 · edited Sep 16 '11 at 16:50

9

$("#div2").dialog({
   closeOnEscape: false,
   open: function(event, ui) { $('#div2').parent().find('a.ui-dialog-titlebar-close').hide();}
});

edited Sep 16 '11 at 16:50

ajm

19,795
3
32
37

answered May 13 '10 at 11:26

Alok Vad

91
1
1

score 9 · Answer 10 · edited Feb 10 '16 at 18:48

None of the above works. The solution that really works is:

$(function(){
  //this is your dialog:
  $('#mydiv').dialog({
    // Step 1. Add an extra class to our dialog to address the dialog directly. Make sure that this class is not used anywhere else:
    dialogClass: 'my-extra-class' 
  })
  // Step 2. Hide the close 'X' button on the dialog that you marked with your extra class
  $('.my-extra-class').find('.ui-dialog-titlebar-close').css('display','none');
  // Step 3. Enjoy your dialog without the 'X' link
})

Please check if it works for you.

score 7 · Answer 11 · answered Feb 02 '11 at 16:45

7

The best way to hide the button is to filter it with it's data-icon attribute:

$('#dialog-id [data-icon="delete"]').hide();

answered Feb 02 '11 at 16:45

ibrahimab

131
1
6

score 6 · Answer 12 · answered Dec 14 '12 at 12:09

6

The close button added by the Dialog widget has the class 'ui-dialog-titlebar-close', so after your initial call to .dialog(), you can use a statement like this to remove the close button again: It works..

$( 'a.ui-dialog-titlebar-close' ).remove();

answered Dec 14 '12 at 12:09

Sonal S.

1,444
1
15
31

score 6 · Answer 13 · edited Mar 25 '19 at 18:41

6

I catch the close event of the dialog box. This code then removes the <div> (#dhx_combo_list):

open: function(event, ui) { 
  //hide close button.
  $(this).parent().children().children('.ui-dialog-titlebar-close').click(function(){
    $("#dhx_combo_list").remove();
  });
},

edited Mar 25 '19 at 18:41

Cody Gray - on strike

239,200
50
490
574

answered Dec 10 '09 at 09:59

ruwan

61
1
1

score 6 · Answer 14 · answered Mar 15 '11 at 01:15

http://jsfiddle.net/marcosfromero/aWyNn/

$('#yourdiv').                 // Get your box ...
  dialog().                    // ... and turn it into dialog (autoOpen: false also works)
  prev('.ui-dialog-titlebar'). // Get title bar,...
  find('a').                   // ... then get the X close button ...
  hide();                      // ... and hide it

score 6 · Answer 15 · answered Oct 19 '11 at 12:46

6

For the deactivating the class, the short code:

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

may be used.

answered Oct 19 '11 at 12:46

Caniko

867
2
11
28

score 5 · Answer 16 · edited May 05 '14 at 01:13

5

$(".ui-button-icon-only").hide();

edited May 05 '14 at 01:13

answered May 23 '13 at 12:23

Cos

552
1
9
16

2

You should be able to use straight CSS here instead of JS if you're only hiding the icon. All `.hide()` does is set `display:none` in CSS, so `$(".ui-button-icon-only").hide();` is functionally equivalent to `.ui-button-icon-only { display: none; }`. – KyleMit Apr 18 '14 at 17:45

score 3 · Answer 17 · answered Nov 21 '12 at 05:18

3

You can also remove your header line:

<div data-role="header">...</div>

which removes the close button.

answered Nov 21 '12 at 05:18

mellow-yellow

1,670
1
18
38

score 3 · Answer 18 · answered Jun 13 '18 at 11:28

Easy way to achieve: (Do this in your Javascript)

$("selector").dialog({
    autoOpen: false,
    open: function(event, ui) {   // It'll hide Close button
        $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
    },
    closeOnEscape: false,        // Do not close dialog on press Esc button
    show: {
        effect: "clip",
        duration: 500
    },
    hide: {
        effect: "blind",
        duration: 200
    },
    ....
});

score 2 · Answer 19 · edited Jan 13 '15 at 12:23

2

document.querySelector('.ui-dialog-titlebar-close').style.display = 'none'

edited Jan 13 '15 at 12:23

Tamil Selvan C

19,913
12
49
70

answered Oct 22 '14 at 06:37

Matthew Wastrodowski

41
3

score 1 · Answer 20 · answered Sep 21 '17 at 02:29

Since I found I was doing this in several places in my app, I wrapped it in a plugin:

(function ($) {
   $.fn.dialogNoClose = function () {
      return this.each(function () {
         // hide the close button and prevent ESC key from closing
         $(this).closest(".ui-dialog").find(".ui-dialog-titlebar-close").hide();
         $(this).dialog("option", "closeOnEscape", false);
      });
   };
})(jQuery)

Usage Example:

$("#dialog").dialog({ /* lots of options */ }).dialogNoClose();

wordragon · Answer 21 · 2018-09-15T16:40:40.153

1

I am a fan of one-liners (where they work!). Here is what works for me:

$("#dialog").siblings(".ui-dialog-titlebar").find(".ui-dialog-titlebar-close").hide();

edited Sep 15 '18 at 16:40

answered Sep 15 '18 at 16:28

wordragon

1,297
9
16

score 0 · Answer 22 · answered Apr 12 '19 at 08:39

0

How about using this pure CSS line? I find this the cleanest solution for a dialog with given Id:

.ui-dialog[aria-describedby="IdValueOfDialog"] .ui-dialog-titlebar-close { display: none; }

answered Apr 12 '19 at 08:39

Chrisman

109
1
8

Chesare · Answer 23 · 2020-12-08T20:28:32.930

This is for jQuery UI 1.12. I added the following configuration setting for 'classes' option

        classes: {
            'ui-dialog-titlebar-close': 'hidden',
        },

the whole dialog initialization looks like this:

ConfirmarSiNo(titulo, texto, idPadre, fnCerrar) {
    const DATA_RETORNO = 'retval';
    $('confirmar-si-no').dialog({
        title: titulo,
        modal: true,
        classes: {
            'ui-dialog-titlebar-close': 'hidden',
        },
        appendTo: `#${idPadre}`,
        open: function fnOpen() { $(this).text(texto); },
        close: function fnClose() {
            let eligioSi = $(this).data(DATA_RETORNO) == true;
            setTimeout(function () { fnCerrar(eligioSi); }, 30);
        },
        buttons: {
            'Si, por favor': function si() { $(this).data(DATA_RETORNO, true); $(this).dialog("close"); },
            'No, gracias': function no() { $(this).data(DATA_RETORNO, false); $(this).dialog("close"); }
        }
    });
}

I use following script call to show it:

ConfirmarSiNo('Titulo',
              '¿Desea actualizar?',
              idModalPadre,
              (eligioSi) => {
                            if (eligioSi) {
                                this.$tarifa.val(tarifa.tarifa);
                                this.__ActualizarTarifa(tarifa);
                            }
                        });

whithin Html body I have the following div that contains the dialog:

<div class="modal" id="confirmar-si-no" title="" aria-labelledby="confirmacion-label">
    mensaje
</div>

final result is:

function 'ConfirmarSiNo' is based on 'Whome' answer on post How to implement “confirmation” dialog in Jquery UI dialog?

score 0 · Answer 24 · answered Jul 11 '21 at 20:57

For those who are using DialogExtend jQuery Extension, you can use the closable option to manage this feature as well as many other tweaks that this decent extension provides.

Note, if you are already using DialogExtend, any of the aforementioned Dialog CSS hacks will get clobbered by DialogExtend when initialized.

score -1 · Answer 25 · answered Mar 27 '17 at 07:49

You can remove the close button with the code below. There are other options as well which you might fight useful.

$('#dialog-modal').dialog({
    //To hide the Close 'X' button
    "closeX": false,
    //To disable closing the pop up on escape
    "closeOnEscape": false,
    //To allow background scrolling
    "allowScrolling": true
    })
//To remove the whole title bar
.siblings('.ui-dialog-titlebar').remove();

How to remove close button on the jQuery UI dialog?

25 Answers25

Linked

Related