Make Background Black for screen other than popup div

Question

I have following div which i am showing as popup:

    <div id="divOperationMessage" style="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;">

------------------Whatever content inside-----------------------------

                    </div>

When its shown, i can easily view other part of screen in the main background.

Its viewing as below:

(Entry updated sucessfully is popup div above)

I dont want to show background screen when poup is there.

I want to make it black..

How can i make it black??

I tried with setting opacity to 0.75 ... but that prooved misconceptual...did not solved my purpose..

What can i do for it???

Please help me.

Answer 1

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!

Answer 2

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)
}