CODEWITHSUNDEEP
javascripthtmlcss
Ewan Delanoy
Ewan Delanoy

Reputation: 1282

Cover whole html page in grey to indicate temporary disablement

For my html page I would like to be able to shade the whole page to indicate temporary disablement of all items in the page, the way it is when (for example) when one opens the "Insert Image" dialog box in the "Ask question" section here (as shown in the snapshot below).

The only thing I can think of is setting the page’s bgcolor attribute to grey, but that's not quite what I want because the shading should appear on top of the page items, not behind them. What is the correct way to do it ?

enter image description here

Upvotes: 0

Views: 1879

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Apply a disabled class to your body and define this style

body.disabled:before {
   content: "";
   position: fixed;
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
   z-index: ... /* choose a z-index so that no other element can overlap it */
   background: rgba(0,0,0, .8);  
}

Example

body.disabled:before {
   content: "";
   position: fixed;
   z-index: 1;
   min-height: 100vh;
   width: 100%;
   left: 0;
   top: 0;
   background: rgba(0,0,0, .5);  
}


.popup {
  position: fixed;
  z-index: 2;
  background: #fff;
  border: 2px #ccc solid;
  padding: 30px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
}
<body class="disabled">
  I'm the body
  
  <div class="popup">I'm the popup</div> 
</body>

If you use a pseudolement you won't need to use empty markup only for styling purpose.
When the user interaction has completed, just remove the disabled class (via js)

Upvotes: 7

atmd
atmd

Reputation: 7490

You could add a div over the rest of your page 

<div id="overlay"></div>


#overlay{
    position:fixed;
    z-index:10;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:[what ever you want]
}

N.b. however I prefer the :before option (assuming you don't need legacy IE support)

Upvotes: 0

Related Questions