Make Background Black for screen other than popup div

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

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!