Modal and overlay behavior - When to close the modal

Question

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.

Answer 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.)

Answer 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.