1

Considering a modal/popup over an overlay, I know that there are certain acceptable ways (as per need), as to which interaction should close the modal, as below:

  1. Clicking on overlay
  2. Hitting esc key
  3. Click on the modal/popup (dont release) and drag the mouse outside the modal/popup and till overlay, then release
  4. Having a close button or icon on modal to do so

Apart from this, is it a good idea to close the modal, if a user clicks on overlay (but not release), starts dragging from the overlay and goes inside the modal window (opposite of 3) and then release the mouse.

The modal in question here basically contains a long form where user has to enter/edit details to save. The form already has a cancel, save button.

3
  • 1
    "Click on the modal window and drag the mouse outside the modal and till overlay" – I haven't seen this behavior. Could it be a side effect of something else (prevent user from saving images)? Do you have an example?
    – 習約塔
    Jun 7, 2019 at 5:35
  • @xiota Am not sure if its a side effect. I have also updated it, in case I was not clear, and also, this is implemented in bootstrap - getbootstrap.com/docs/4.3/components/modal. Just an example, could be other examples as well which dont do this, but I wanted to show the behavior
    – whyAto8
    Jun 7, 2019 at 6:13
  • @xiota Right, that could be a side effect of clicking outside the modal. So, in case the info is critical, then clicking directly on the outside or overlay should not close the modal either. would that be correct.
    – whyAto8
    Jun 7, 2019 at 6:28

2 Answers 2

1

If a modal contains critical information that cannot be recovered, it should close only when a close button is explicitly clicked. Pressing Esc or clicking anywhere else should not close it. Otherwise, it doesn't really matter how the modal is closed because most users don't want most modals (ads) in the first place.

In the case of a form, I wouldn't want it to be dismissed easily because that could result in lost work. Even if the form is saved as it is in progress, its disappearance could lead to a panic attack for the user.


None of the modals on the Bootstrap Modal demo page close when I drag from inside to outside the modal. They do close when I drag from outside to inside, but that appears to be a side effect of clicking outside the modal. (I'm using Firefox.)

1
  • This is helpful, thanks. BTW its same across browsers, tried Chrome, Firefox, Safari.
    – whyAto8
    Jun 7, 2019 at 6:29
2

Modals with forms where users are trying to enter information, should close only by clicking on the close button. Other quicker methods of dismissal can be used on light boxes which help in displaying more of the already available read only content, for example displaying a larger image. However, it is a good practice to have the close button on the top right as an explicit CTA conveying the possibility of dismissal if needed.

Your Answer

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

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