How could I create a popup that disables everything else?

Question

So I'm creating a game. But before the user can play, I want to create a popup play button and instructions, which will disable everything behind the popup until the user finishes everything inside the popup. An example would be like Yahoo mail notifications - after a while logging into your email, their would be a window that appears. Everything, your mailbox, is blurred, darkened, in the background, and unresponsive - until you click the X to make the window go away. It doesn't have to be as fanciful as that, but I'd like to create something similar.

See https://stackoverflow.com/questions/33777533/trigger-file-input-dialog/ — guest271314, Jan 19 '18 at 01:27
The terms you're looking for are "Lightbox" (darken the background) and "Modal" (popup window) — Sidney, Jan 19 '18 at 01:27

Daniel · Accepted Answer · 2018-01-19T01:43:38.677

You might simply place a div with position: fixed and an appropriate z-index on top of anything else.

To cover the whole page you can give at width: 100%; height: 100%

to achieve a blur effect you may try the solution from this SO question:

.modal {
  position: fixed;
  top:0;
  left:0;
  z-index: 9999;
  width: 100%;
  height: 100%;
}

.blur {
  position:absolute;
  width: 100%;
  height:100%;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  background-color: #ccc;
  opacity: 0.8;
  z-index:-1;
}

<div class="content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="modal">
 <div class="blur"></div>
 My modal content
</div>

score 0 · Answer 2 · answered Jan 19 '18 at 01:29

Add a background div with fixed position and 100% width and height, then set the opacity to around .3 - .5. This will blur the content it covers. Set the z-index to 1.

For the foreground div, set the z-index to 2 (or anything greater than the background div). Add the HTML for your instructions and position as needed (position: fixed, top: 40%, height: 200px; width: 400px; adjust as needed).

As long as the opacity of the background "overlay" div is correct, the user won't be able to click on any content until addressing the foreground div.

How could I create a popup that disables everything else?

2 Answers2