How to disable background when modal window pops up

I am building on a webpage template and made some modifications for modal pop up as given below:

<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" style="background-color:#FECE1A;display:none;width:750px;left:46%" aria-hidden="true">
  <div class="modal-dialog">
  <script>
    $("#myModal4").on("show", function () {
      $("body").addClass("modal-open");
    }).on("hidden", function () {
      $("body").removeClass("modal-open")
    });
  </script>
  <!--Modal Content-->
  </div>
</div>

and the body.modal-open css function goes like this

body.modal-open {
  overflow: hidden;
}

the popup works fine. The problem is that whenever the pop up appears I can still click the header menu of the template and some links in the background. How do I disable everything in the background such that I can click only what is available at the popup.

Solution

You could use an overlay - another div the full size of the screen that covers the html, with the bonus of giving a translucent grey shadow over the body.

In this example, use two divs.

One is the overlay, and the other (inside the overlay for convenience) is the modal.

<div class="overlay">
  <div class="modal">
    This is the modal. You can put whatever you like in here.
  </div>
</div>

Now the overlay needs styles:

.overlay {
  position: fixed; /* Positioning and size */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(128,128,128,0.5); /* color */
  display: none; /* making it hidden by default */
}

and the modal needs some too:

.modal {
  position: fixed; /* positioning in center of page */
  top: 50vh;
  left: 50vw;
  transform: translate(-50%,-50%);
  height: 400px; /* size */
  width: 600px;
  background-color: white; /* background color */
}

Include jQuery by putting this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

In the head tag at the top of your code.

Then, use this button to open the modal:

<button onclick="$('.overlay').show();">Open modal</button>

and this jQuery code to catch click on the overlay but not its child.

$('.overlay').on('click', function(e) {
  if (e.target !== this) {
    return;
  }
  $('.overlay').hide();
});

$('.overlay').on('click', function(e) {
  if (e.target !== this) {
    return;
  }
  $('.overlay').hide();
});

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(128,128,128,0.5);
  display: none;
}
.modal {
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%,-50%);
  height: 400px;
  width: 600px;
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="https://www.google.co.uk">This is a link, but with the modal open you can't click it!</a>
<br>
<br>
<button onclick="$('.overlay').show();">Open modal</button>

<div class="overlay">
  <div class="modal">
    This is the modal. You can put whatever you like in here.
  </div>
</div>