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?

@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
– Jarrett, Commented Feb 10, 2014 at 16:46
Use "ui-dialog-titlebar-close": "display:none;" when we setup the jqueryui modal dialog — MarcoZen
– MarcoZen, Commented Dec 25, 2017 at 18:07

antishok · Accepted Answer · 2019-07-29 15:10:04Z

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, 2019 at 15:10

antishok

2,91018 silver badges21 bronze badges

answered May 22, 2009 at 11:20

Robert MacLean

39.3k26 gold badges102 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

21 Comments

Anthony Serdyukov Over a year ago

$(".ui-dialog-titlebar-close", ui).hide(); to hide the button for this dialog only.

Nigel Over a year ago

I couldn't get it to work from the ui parameter either. I ended up using: $(".ui-dialog-titlebar-close", $(this).parent()).hide();

Bradley Mountford Over a year ago

@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();

Nabab Over a year ago

@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();

opengrid Over a year ago

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

|

Salman Arshad · Accepted Answer · 2014-02-07 16:23:30Z

373

+100

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 7, 2014 at 16:23

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

answered Mar 14, 2011 at 16:10

David

42.4k3 gold badges19 silver badges14 bronze badges

6 Comments

A. Murray Over a year ago

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.

Bongs Over a year ago

very clean solution... +1 for not involving additional js functionality to remove the button.

ZolaKt Over a year ago

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.

Mr. Lance E Sloan Over a year ago

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"),

Mladen Adamovic Over a year ago

This solution allows closing with escape, if you want to prevent closing on escape use: $( ".selector" ).dialog({ dialogClass: 'no-close' , closeOnEscape: false,});

|

Derek 朕會功夫 · Accepted Answer · 2013-03-25 05:24:52Z

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, 2013 at 5:24

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

answered Nov 26, 2009 at 10:38

Earl

1,2891 gold badge8 silver badges2 bronze badges

3 Comments

Kevin Panko Over a year ago

This is more complicated than you need. $(".ui-dialog-titlebar-close", $(this).parent()).hide();

Matthew Dally Over a year ago

@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. jqueryui.com/demos/dialog/modal-form.html

technomage Over a year ago

.closest('.ui-dialog') is better than assuming a parent.

Ruan Mendes · Accepted Answer · 2019-03-20 09:18:47Z

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, 2019 at 9:18

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

answered May 22, 2009 at 7:58

Gordian Yuan

5,0806 gold badges31 silver badges35 bronze badges

2 Comments

Mark Brittingham Over a year ago

This answer was easy and straightforward. It applies, however, only if you wish to disable the button for all dialogs.

Ruan Mendes Over a year ago

@MarkBrittingham You can just apply a custom CSS class to your modal and to the selector, then this will apply to whoever you want

mhu · Accepted Answer · 2013-03-19 12:26:42Z

54

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" );
        }
    }]
});

answered Mar 19, 2013 at 12:26

mhu

18.1k10 gold badges67 silver badges97 bronze badges

Comments

Miguel Galante · Accepted Answer · 2010-11-26 19:04:30Z

42

I think this is better.

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

answered Nov 26, 2010 at 19:04

Miguel Galante

1,6991 gold badge15 silver badges13 bronze badges

2 Comments

Zaveed Abbasi Over a year ago

Issue is it occasionally hides close button for other dialogues as well. how to prevent that .

Zaveed Abbasi Over a year ago

Even Using open: function(event, ui) { $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').show(); } doesn't work.

Salman Arshad · Accepted Answer · 2015-08-04 10:02:56Z

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.

FLY · Accepted Answer · 2012-04-12 08:17:45Z

30

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, 2012 at 8:17

FLY

2,4695 gold badges30 silver badges40 bronze badges

Comments

ajm · Accepted Answer · 2011-09-16 16:50:28Z

9

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

edited Sep 16, 2011 at 16:50

ajm

20.2k3 gold badges34 silver badges38 bronze badges

answered May 13, 2010 at 11:26

Alok Vad

911 silver badge1 bronze badge

Comments

John Slegers · Accepted Answer · 2016-02-10 18:48:46Z

9

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.

edited Feb 10, 2016 at 18:48

John Slegers

47.4k23 gold badges205 silver badges173 bronze badges

answered Feb 20, 2012 at 1:40

Michael Zelensky

2,1725 gold badges31 silver badges41 bronze badges

Comments

ibrahimab · Accepted Answer · 2011-02-02 16:45:12Z

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 2, 2011 at 16:45

ibrahimab

1712 silver badges6 bronze badges

Comments

marcosfromero · Accepted Answer · 2011-03-15 01:15:28Z

6

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

answered Mar 15, 2011 at 1:15

marcosfromero

2,85319 silver badges17 bronze badges

Comments

Caniko · Accepted Answer · 2011-10-19 12:46:47Z

6

For the deactivating the class, the short code:

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

may be used.

answered Oct 19, 2011 at 12:46

Caniko

8722 gold badges12 silver badges28 bronze badges

Comments

Sonal S. · Accepted Answer · 2012-12-14 12:09:25Z

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, 2012 at 12:09

Sonal S.

1,4421 gold badge15 silver badges31 bronze badges

Comments

Cody Gray · Accepted Answer · 2019-03-25 18:41:43Z

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, 2019 at 18:41

Cody Gray♦

246k53 gold badges513 silver badges591 bronze badges

answered Dec 10, 2009 at 9:59

ruwan

611 silver badge1 bronze badge

Comments

Cos · Accepted Answer · 2014-05-05 01:13:10Z

5

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

edited May 5, 2014 at 1:13

user142162

answered May 23, 2013 at 12:23

Cos

5621 gold badge9 silver badges17 bronze badges

1 Comment

KyleMit Over a year ago

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

mellow-yellow · Accepted Answer · 2012-11-21 05:18:51Z

3

You can also remove your header line:

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

which removes the close button.

answered Nov 21, 2012 at 5:18

mellow-yellow

1,8301 gold badge22 silver badges44 bronze badges

Comments

Arsman Ahmad · Accepted Answer · 2018-06-13 11:28:55Z

3

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
    },
    ....
});

answered Jun 13, 2018 at 11:28

Arsman Ahmad

2,2791 gold badge32 silver badges37 bronze badges

Comments

Tamil Selvan C · Accepted Answer · 2015-01-13 12:23:56Z

2

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

edited Jan 13, 2015 at 12:23

Tamil Selvan C

20.3k12 gold badges55 silver badges72 bronze badges

answered Oct 22, 2014 at 6:37

Matthew Wastrodowski

413 bronze badges

Comments

bmode · Accepted Answer · 2017-09-21 02:29:31Z

1

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();

answered Sep 21, 2017 at 2:29

bmode

7706 silver badges9 bronze badges

Comments

wordragon · Accepted Answer · 2018-09-15 16:40:40Z

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, 2018 at 16:40

answered Sep 15, 2018 at 16:28

wordragon

1,3579 silver badges19 bronze badges

Comments

Chrisman · Accepted Answer · 2019-04-12 08:39:10Z

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, 2019 at 8:39

Chrisman

991 silver badge8 bronze badges

Comments

Chesare · Accepted Answer · 2020-12-08 20:28:32Z

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?

Timothy C. Quinn · Accepted Answer · 2021-07-11 20:57:11Z

0

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.

answered Jul 11, 2021 at 20:57

Timothy C. Quinn

4,6391 gold badge47 silver badges56 bronze badges

Comments

bpjoshi · Accepted Answer · 2017-03-27 07:49:07Z

-1

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();

answered Mar 27, 2017 at 7:49

bpjoshi

1,13716 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to remove close button on the jQuery UI dialog?

25 Answers 25

21 Comments

6 Comments

3 Comments

2 Comments

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

25 Answers 25

21 Comments

6 Comments

3 Comments

2 Comments

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related