These days it's common for modal dialogs to also reduce the brightness of the background content, to make it clear that it can't be interacted with. This is especially common on the web.

What is the name of the darkening behind the modal?

Example of a modal dialog

Since I've never known the standard name, I have resorted to a slightly silly name: sneezeguard.

  • 1
    Ah, it seems to be called an "overlay". That makes sense. – aaaidan Dec 20 '17 at 21:59
  • Can you clarify if you're looking for opinions on what a good semantic term would be for that element, or do you want to know how various UI frameworks actually refer to it? – Luke Smith Dec 22 '17 at 2:15
  • @LukeSmith uh... both, either? I thought that there would be a clear, standard name. (I'm realising that there are at least a couple of contenders). – aaaidan Dec 22 '17 at 22:57
  • Ultimately, I want advice on what I should call it. I'd rather use an existing, accepted term, but it would be great if it was also descriptive. – aaaidan Dec 22 '17 at 22:58
  • Any particular reason you need to refer to it as anything besides what the framework has decided to call that particular DOM element? See the answer below re: Bootstrap's modal. – Luke Smith Dec 24 '17 at 2:57

It is refereed to as "modal backdrop"

in Bootstrap documentation at w3schools Bootstrap JS Modal

This is called a lightbox effect. It can also be referred to as 'out of focus,' as in, the modal is now in focus and the window behind it is disabled.

https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c

  • In fact, that is not at all an "effect". It is a separate element (div) with a clear purpose, a HTML component with a group of CSS proprieties. – Madalina Taina Dec 27 '17 at 12:15
  • @MadalinaTaina it is an effect. The same way drop downs are effects as well as elements. – insidesin Dec 29 '17 at 2:48
  • @insidesin I’m a developer and what you said hasn’t any sense. – Madalina Taina Dec 29 '17 at 2:56
  • Then you're not a good developer. @MadalinaTaina – insidesin Dec 29 '17 at 2:57
  • @insidesin Really? “Effect” Is the term you use for html elements? Please show a reference if you want to continue this conversation and limit the comments to the subject, not to my skills. Happy holidays to you too! – Madalina Taina Dec 29 '17 at 3:06

The background behind the modal is blurred and darkened for a 3D effect to get more visual contrast and make the background recede visually.

A good word for the dark, transparent layer over the blurred background is scrim. Scrim is something used to physically cover the lights in photography and film shoots - to get lighting effects.

Here's the word scrim being used in Material Design guidelines.

Users should be able to tap or click on the background cover, or scrim, to close whatever is opened in the foreground. Like they're tapping on the background to open it back up.

In the last years, the term I always found in frameworks for the transparent background of a modal/ dialog/ pop-up is overlay.

See: Considerations for Styling a Modal.

Dealing with the overlay A modal is often accompanied by a full-screen-covering overlay. This is useful for a number of reasons:

  • It can darken (or otherwise mute) the rest of the screen, enforcing the "you need to deal with this before you leave" purpose of a modal.
  • It can be used to prevent clicks/interactions on stuff outside the modal.
  • It can be used as a giant close button. Or "cancel" or whatever the most innocuous action is.

In material design is used the term backdrop.

enter image description here

The effect is essentially a pop-over. It's like a pop-up window, except it's just over the content and not under or outside it.

The darkened areas can be called the disabled background area of the modal or if it's blurred, you can call it glassy backdrop.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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