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.