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?

Answer 1

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.