JQuery: Disable 'X' button in top-right of Dialog

Question

Hello all,

I'm trying to make a dialog that requires a user to agree to terms before continuing, and don't want to allow the user to just click the 'X' in the top right corner of the dialog to close. I'd like to require that the user click 'I agree'.

Is there any way to disable the 'X' in the dialog?

Thanks.

Clarification: I'm just using the standard jQuery UI dialog: $.dialog().

Answer 1

If your dialog is a regular popup window, it is not possible to prevent the user from closing the window.

You could use a jQuery modal dialog plugin, such as jqModal.

Note, however, that you cannot prevent the user from closing the main window either.

---

EDIT: If you're using the jQuery UI dialog, you could add the following CSS rule:

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

You shouldalso set the closeOnEscape to false.

---

Also, why are you forcing the user to click I Agree?
Why can't you treat a closed window as if the you disagreed?

Answer 2

If you're using alert, perhaps you should consider confirm instead:

if (!confirm("Click OK to confirm that you agree to the terms and conditions.")) {
    // they didn't click OK
} else {
    // they did.
}

Or, use a plugin like SLaks mentioned

Answer 3

As far as your task of disallowing the user to click the X, I would recommend one of a few approaches:

1. use a CSS rule to set the display for that button to 'none'. Using Firebug's Inspect mode, you should be able to look at the tag that the jQuery UI dialog places there and add a CSS rule for it. If it's display is none, the user shouldn't be able to click it.
2. Similarly, attach a jQuery .click() event that does nothing, and returns false to stop the event propagation (I have never actually done this one, but it should work).
3. You could attach a function to the dialog's beforeClose() event that would allow you to prevent the dialog from closing if the user hadn't clicked "I Agree"
4. Most complicated of all, but useful if you want to have similar dialogs or make other functional changes, you could subclass the jQuery UI dialog by creating a jQuery UI plugin that internally instantiates the dialog then modifies the default behavior by applying CSS rules or attaching events as described above.

Hope one of those gets you going in the right direction...

Answer 4

I'm assuming you are using jQuery UI.

If so, attach a beforeClose event handler and return false from it if the Agree button hasn't been clicked. You can also use CSS to set the X button to {display: none}

 var agreed = false; //has to be global
 $("something").dialog( { buttons : { 'Apply', function() {
         agreed = true; 
         $(this).dialog.("close") 
     } },
     beforeclose : function() { return agreed; }
 });

Answer 5

Noticed that the div created for the dialog's titlebar has an aria-labelledby attribute that references your dialog (ui-dialog-title-{yourDialogName}), so I just hid the "x" with the following CSS:

div.ui-dialog[aria-labelledby="ui-dialog-title-myDialog"] a.ui-dialog-titlebar-close {
    display: none;
}

I also set closeOnEscape to false to prevent that.