When we need to focus the user’s attention on a particular topic, we use a modal to take focus away from the rest of the interface.
A link with an
href pointing to the ID of the modal element, and the class
js-activate-modal applied so that we can attach a JS event handler to it.
The modal code itself, include at the end of the page content markup, outside of any containers—they are automatically hidden on load, with JS enabled, as is demonstrated here.Toggle pattern display width
An overlay, used to obscure the whole contents of the screen while the modal is loaded.Toggle pattern display width