accoladesio / building-ui-components-with-js

MODAL BOX

A modal (also called a modal window or lightbox) is a web page element that displays in front of and deactivates all other page content. To return to the main content, the user must engage with the modal by completing an action or by closing it. Modals are often used to direct users’ attention to an important action or piece of information on a website or application.

The purpose of modals can be summed up in one word: focus. If you need visitors to focus on something simple, a modal window is one of the most effective means to do so. Users must either close the modal, or complete a specific action within it (e.g., reading a message and clicking “OK”, filling out a form, etc.).

Here’s a simple example that can only be closed by either clicking outside the modal box, pressing the escape key or clicking the cancel button.

Modals are polarizing among designers and users alike. Many find value in their ability to quickly bring attention to something essential, while others regard them as an unwelcome interruption to the user experience.