Make Background Black for screen other than popup div

Here you go!

Here's the HTML code:

<div id="overlay">
  <div id="pop-up">
    Content in Pop-up.
  </div>
</div>

And here's the CSS code:

#overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000000;
  display: none;
}

#pop-up {
  background-color: white;
  border: 2px solid black;
  display: block;
  width: 350px;
  z-index: 1001;
  top: 60px;
  left: 240px;
  position: fixed; 
  padding-left: 10px;
  margin: auto;
}

Hope this helps!

Here is what I would do:

Create a fixed div with 100% width and height;

put the popup div inside this fixed overlay and center it horizontally and vertically.

<div class="overlay">
    <div class="popup">
        Whatever code!!
    </div>
</div>

css

.overlay{
    position:fixed;
    z-index:999;
    width:100%;
    height:100%;
    background-color: black;
    background-color:rgba(0,0,0,.75)
}

.popup{
    width:300px;
    position:absolute;
    left:50%;
    top:100px;
    margin-left:-150px;
}

Update 2020: I would use 100vh and 100vw as it is widely supported. Centering the popup would be done with CSS Grid Layout and aligning the box to center.

.overlay{
    position:fixed;
    z-index:999;
    width:100vw;
    height:100vh;
    background-color: black;
    background-color:rgba(0,0,0,.75)
}

Here's a FIDDLE

if($('#divOperationMessage').length > 0 && $('.mask').length < 1) {
   $('body').append('<span class="mask"></span>'); 
}

---

.mask {
  background: rgba(0,0,0,0.8);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}