I come across modal dialogs everyday and I see different implementations all the time.

Most modal dialogs have a [X] in the upper right hand corner of the dialog along with a Cancel/Close button.

There are so many options, what is the best practice for closing modal dialogs? Also, are there any studies to reference showing what is preferred?

Implementations I have seen:

  • Cancel/Close button with [X] in the corner(top right/left, bottom right/left?)

  • Click anywhere on the modal to close

  • Just an [X] in the corner(top right/left, bottom right/left?)

  • Just a Cancel/Close button

  • Click anywhere outside the modal

  • Esc key with or without [X]/Cancel/Close

  • 2
    Left out the option to close by clicking anywhere outside the modal. Commented Sep 10, 2010 at 15:34
  • 2
    If the only option is to close, it's a "monolog". You should think about getting rid of it or making it modeless. Commented Sep 10, 2010 at 15:37

6 Answers 6


I think the best implementation depends on the type of dialog and desired interaction mode.

Dialogs that require an action shouldn't have an [X] to close them, in my opinion (nor be closed by clicking anywhere other than the action buttons.
Most of those have a "Save" and "Cancel" set of buttons, so it leaves the users thinking (even if for a split second) if "close" means "cancel" or not.

Information dialogs should have both a "close" button and a [X], in my opinion.
If the information is something the user might want to interact with (for example text to be selected and copied), then of course you cannot allow a click inside to close the dialog.
If you want the user to pay attention to the information, I would also disallow the clicking outside to dismiss, since it increases the chance the user has to focus on the dialog to close it (and hopefully read something there).

  • 1
    I agree almost entirely, but I don't think that dialogs should have [x] buttons. I see [x] in window chrome as ending a task that you began earlier. It saves and closes files and email messages (and makes sure they've been saved), destroys browser windows, and exits whole applications. Using [x] to dismiss dialogs dilutes that meaning (my personal opinion, of course). Also, every dialog asks a question (sometimes that question is "could you please read this?"). Clicking a button answers the question, clicking the [x] just means "go away".
    – s4y
    Commented Sep 16, 2010 at 4:54
  • and if your user wants to do that, then either figure out how to make them not want to or let them do it. One way or another, they will get around it if they so desire
    – CobaltHex
    Commented Dec 14, 2015 at 21:28

You forget ESCAPE (Esc key) to close some (Cancel (OK/Cancel), or OK for single OK) modal windows

  • 3
    I usually bind the OK/Cancel to the Escape and Enter keys. Commented Sep 10, 2010 at 16:13
  • @DavidinDakota, just to clarify you're saying you bind Ok to Enter and Cancel to Escape right? Not the same order as your words.
    – Robert
    Commented Dec 18, 2013 at 23:07

I never click the cross in the corner. If the buttons are left out, I'm usually confused until I remember it's still a window. I would go with OK/Cancel buttons (unless other words are more fitting, eg 'yes/no' 'save/don't save') and a cross in the corner that does the same as the cancel button. No other 'hidden' actions, such as closing if you click anywhere.


The exit button is always needed, whether the users click on it or not, because it's absence is confusing. The Close links help, but they need to be accompanied by the 'X'. I suggest you always provide all of the exit options ('x', link and click anywhere to close).

I'm not currently aware of a study referring to this topic, but there's an interesting article con Smashing Magazine about the proper use of Modal Windows that might interest you: http://www.smashingmagazine.com/2009/05/27/modal-windows-in-modern-web-design/

  • 1
    It would be useful to provide some explanation why not having "x" is confusing. Commented Jul 31, 2017 at 21:15

Explicit dialog buttons also turn out to be an important accessibility feature. I've worked on the GNOME Human Interface Guidelines for many years, and every time we update them there are calls to 'reduce clutter' by removing 'redundant Close buttons' in the dialog, for those dialogs that can be unambiguously closed using the window frame control and its associated keyboard shortcut (Alt-F4, same as MS Windows).

Every time we suggest it to the GNOME accessibility community, however, they re-state their preference for retaining the tangible buttons inside the window itself.

  • 1
    Have you considered excluding the window frame controls from dialogs? That's what Apple does. Commented Sep 16, 2010 at 1:42

I would probably go with both controls:

(X) - top right corner

Rationale: very common for the web and I think even Mac users are used to it. [X] is a symbol that users recognize well and having (Close) seems redundant.

[OK/Close] - in the content

Rational: if the user skimmed through the text, there eyes may very well land under the text and the cursor might closer to the close button, so it might be faster to hit the button, especially, since it is bigger as well. You can also put focus on the Close button so that the user can just hit Enter to close the dialog.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.