In a modal popup , to close it we can have three option - Either a message at the top Esc to close or [x] or both. (Or depending on the message in the modal popup an ok or cancel.)

From my research I found out the following.

  • Laptop users mostly do not use mouse and tend to use key board shortcuts for almost everything , and these people might use the Esc button.
  • People who frequently uses mouse will adhere to it and would prefer to click on the close button to close the modal popup

Apart from these are there any points that favours the selection of either options?

Is it a good idea to use both at the same time? Are there any existing studies or guidelines regarding this?

  • 2
    I suppose the esc button should work in every case.
    – xpy
    Sep 23, 2015 at 12:00
  • 2
    First answer the question: Do you really need a modal dialog? Because they ARE evil. If you really DO need one, then do everything you can to make it easy to get rid of - Esc should work, and there should be a close button exactly where the user expects to find one. Sep 23, 2015 at 12:06
  • @MichaelKohne I would just like to point out that this is what happened to me when I visited that article about how evil modal popups are. I hate this.
    – cat
    Jan 20, 2016 at 6:28
  • @cat - and here's a perfect example of why you want contact information on your blog - I've got no way to tell that guy that his blog is demonstrating the evil of which he speaks. Jan 20, 2016 at 10:42
  • @MichaelKohne When i opened that website, it showed me a modal to sign up for their newsletter. The irony is so sweet it gave me diabetes.
    – ecc
    Dec 19, 2016 at 16:25

2 Answers 2


I think that the best solution is to let both (esc and click on close button)

  • Shortcuts are good for laptop user then Esc
  • Novice users prefer to click on close button because they don't know shortcuts.

In case modal popup, you can add an other issue to exit the modal : Click outside of modal.

An example (Custom Dialog) https://material.angularjs.org/latest/#/demo/material.components.dialog


I agree that it's important to have both options and also the "click outside" of modal. But bear in mind that when the user is completing a task it is better to offer a CANCEL button and remove the click outside in order to avoid missing completion.

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.