title: How to disable background when modal window pops up
body: <p>I am building on a webpage template and made some modifications for modal pop up as given below:</p>
  
  <pre><code>&lt;div class="modal fade" id="myModal4" tabindex="-1" role="dialog" style="background-color:#FECE1A;display:none;width:750px;left:46%" aria-hidden="true"&gt;
    &lt;div class="modal-dialog"&gt;
    &lt;script&gt;
      $("#myModal4").on("show", function () {
        $("body").addClass("modal-open");
      }).on("hidden", function () {
        $("body").removeClass("modal-open")
      });
    &lt;/script&gt;
    &lt;!--Modal Content--&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the body.modal-open css function goes like this</p>
  
  <pre><code>body.modal-open {
    overflow: hidden;
  }
  </code></pre>
  
  <p>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.</p>