[runarberg]

I was recently refactoring the dialogs at work where I inherited a codebase with a few different custom implementations of equally many dialogs. Some of those had the click outside handler closing the dialog, others didn’t. So I went outside to the world wide web to see how other apps do this to pick one consistent experience.

What I saw is there is no consensus on whether clicking outside should close a modal dialog or not. A menu dialog, sure, but a modal dialog was all over the place.

I went with not closing on outside press. My reasoning is that perhaps the user had filled up some form or done some other stateful interaction with the dialog’s content, and then clicked outside on accident (perhaps missed the submit button because their mouse was jerked around, or they are on a very small touch-screen) that would be annoying to have to reopen the dialog and re-enter those values.

[vxNsr]

I would ask to save the state locally (while the tab/window is still open) but allow clicking outside to close the dialog. finding the hidden x or cancel is sometimes hard, but it's easy to click/tap outside the window.

[runarberg]

While this is certainly an option, quite often users expect to start with a clean slate when they open a new dialog. In this case you can only pick one. Give the user an extra convenient way to dismiss the dialog, but doing so, risk surprising them when they open the dialog the second time.

Me, I opt for the no surprise and make sure the top x-mark is nice and clickable, as well as a cancel button after a submit button, and make sure the escape key also works for users with easy access to physical keyboards.