13

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.

Improve this question
8
  • 1
    Ah, it seems to be called an "overlay". That makes sense.
    – aaaidan
    Dec 20, 2017 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, 2017 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, 2017 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, 2017 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, 2017 at 2:57

5 Answers 5

Reset to default
11

It is refereed to as "modal backdrop"

in Bootstrap documentation at Modal / Options

Improve this answer
3
6

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

Improve this answer
4
  • 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, 2017 at 12:15
  • @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, 2017 at 3:06
  • effect something that is produced by an agency or cause; result; consequence: Exposure to the sun had the effect of toughening his skin.
    – insidesin
    Dec 29, 2017 at 3:07
  • One word holds many meanings. A doughnut is edible, a doughnut can be made by a car. Neither of these cancel the other out, they are one word with multiple meanings.
    – insidesin
    Dec 29, 2017 at 3:09
4

Google Material Design Guidelines call it Scrim: https://material.io/design/environment/surfaces.html#attributes

Scrim

Scrims are temporary treatments that can be applied to Material surfaces for the purpose of making content on a surface less prominent. They help direct user attention to other parts of the screen, away from the surface receiving a scrim.

Scrims can be applied in a variety of ways, including:

  • Darkening or lightening the surface and its content
  • Reducing the opacity of the surface and its content

Multiple surfaces on a screen at a time can display scrims. Scrims can appear at any elevation, whether in the foreground or background.

Improve this answer
1
  • 2
    yes, Material took this name from theaters lightning and some old digital design lingo for printing. That's how I call it, but backdrop is used a lot as well
    – Devin
    Feb 1, 2019 at 17:19
3

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

Improve this answer
3

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.

Improve this answer

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.