Best way to remove the close button on jQuery UI dialog box widget?

Question

What's the best way to remove the close button on the jQuery UI dialog box?

I do not wish people to be able to close the dialog box.

I'm covering it on the code angle by handling:

closeOnEscape: false,
beforeclose: function (event, ui) { return false; }

I'm trying not to need to write script to grap the class / id of the close button and then hide it manually. And I'd rather not change the CSS manually either, as the dialog box may have situations where it needs the close button.

I'd prefer to do it the dialog config somehow, but either I can't figure out how to do it or the dialog box doesn't allow for it at all.

Any suggestions on how to configure the dialog box?

possible duplicate of [Remove close button on jQueryUI Dialog?](http://stackoverflow.com/questions/896777/remove-close-button-on-jqueryui-dialog) — Jim G., May 21 '13 at 12:00

score 57 · Accepted Answer · edited Sep 08 '14 at 18:41

57

I found this to be a good solution

$("#myDialogID").dialog({
    closeOnEscape: false,
    beforeClose: function (event, ui) { return false; },
    dialogClass: "noclose"
});

Not altering the existing styles, instead adding a new bit:

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

Adding the class ended up being quite an elegant method, as i'm "classing" the dialog as one that cannot be closed.

edited Sep 08 '14 at 18:41

bishop

37,830
11
104
139

answered Aug 25 '10 at 14:36

Alex KeySmith

16,657
11
74
152

1

This is an extremely elegant solution. Much appreciated! – Dwayne Hinterlang Jan 13 '14 at 09:35
1

Good edit @bishop, at the time of writing "beforeclose" was still kicking around in ye'olden days :-) https://github.com/jquery/jquery-ui/commit/b42125af4350eda14a6b15bb71f8dd336858fbd8/ – Alex KeySmith Sep 09 '14 at 09:19

score 4 · Answer 2 · answered May 26 '15 at 16:05

4

I found another solution, works for me:

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

answered May 26 '15 at 16:05

Chiragkumar Thakar

3,616
5
37
49

Best way to remove the close button on jQuery UI dialog box widget?

2 Answers2

Linked