Disable Everything In Background While A Popup Is Open

I am developing a HTML, JQuery and CSS-based webpage on which I want to open popup using simple div tag. I want to disable everything in the background while a popup is open. That

Solution 1:

Just put it inside another container that fills the page (and show that):

$(function() {
  $("#but1").click(function() {
    $(".fullscreen-container").fadeTo(200, 1);
  });
  $("#but2").click(function() {
    $(".fullscreen-container").fadeOut(200);
  });
});

.fullscreen-container {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(90, 90, 90, 0.5);
  z-index: 9999;
}

#popdiv {
  height: 300px;
  width: 420px;
  background-color: #97ceaa;
  position: fixed;
  top: 50px;
  left: 50px;
}

body {
  padding-top: 65px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonid="but1">Open dialog</button><divclass="fullscreen-container"><divid="popdiv"><h1>
      Dialog content!
    </h1><buttonid="but2">Close dialog</button></div></div>

Solution 2:

You might want this:

A backdrop surrounding your popup which covers the entire screen on top of other elements. A structure like this:

+--------------------+
| BackDrop           |
|                    |
|  +--------------+  |
|  | Pop Up       |  |
|  |              |  | 
|  +--------------+  |
|                    |
|                    |
+--------------------+

Example

$(document).ready(function() {
  $("#but1").click(function() {
    $(".backdrop").fadeTo(200, 1);
  });
  $("#but2").click(function() {
    $(".backdrop").fadeOut(200);
  });
});

body {
  margin: 0px;
  padding: 0px;
}

#popdiv {
  height: 40%;
  width: 30%;
  background-color: #97ceaa;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.backdrop {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  display: none;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonid="but1">Open</button><divclass="backdrop"><divid="popdiv"><buttonid="but2">Close</button
</div></div>

Solution 3:

Create a background div with the property z-index, for example:

#disableDiv {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-color: black;
  z-index: 1;
  display: none;
}

Before showing your popup, show the background div, it will make impossible to click/hover on the elements "behind" it.