Disable everything in background while a popup is open

Question

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 means while the popup div is visible to the user, he or she should not be able to click anything else on the webpage (anything behind or in the background of popup).

Following is how I am trying to do it. I open a popup by clicking on an HTML button (#but1) and close it using the button (#but2) by applying the following jquery-

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

The CSS for the popup div is -

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

I want to disable the background after my popup div appears on the webpage. After my popup appears the mouse effects should be disabled, and the user should not be able to click/hover anything else on the webpage (in the background of popup). User will need to close the popup to access the webpage. How can I achieve this? Is it possible to do this using only CSS?

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

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