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

Answer 3

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%;
}

Answer 4

You need to add an overlay div to place over the main content, and below the popup div.

div.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.75); /*this sets the slightly see-through black*/
    z-index: 100; /*Make this less than the existing popup div*/
}

Answer 5

Try this

<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>
<div class = 'black_bg' style = "position:fixed;width:100%;height:100%;opacity:0.75;background-color:#000"></div>

And whenever you are showing the popup , add this line

$('.black_bg').show();

Answer 6

If you wanna use jquery,you can use jquery modal feature.

Easy to use!

Check here :

http://jqueryui.com/dialog/#modal

$(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });

In this,if you click on the button,or outside of the popup menu,it closes. You don't have to code down that too. Short and compacT!