title: How to change background Opacity when bootstrap modal is open
body: <p>I am using bootstrap modal. When modal is open background content opacity is not changed by default. I tried changing in js using </p>
  
  <pre><code>function showModal() {
  document.getElementById("pageContent").style.opacity = "0.5";
  </code></pre>
  
  <p>}</p>
  
  <p>This is working but whenever modal is closed opacity style still remains for the pageContent. But, I am sure this is not the right way to do. Any help appreciated. Thanks.
  Html button which opens Modal is</p>
  
  <pre><code>&lt;button class="btn glossy-clear" data-toggle="modal" data-target="#modal-display" onclick="showModal()"&gt;Clear&lt;/button&gt;
  </code></pre>
  
  <p>Modal Code is </p>
  
  <pre><code> &lt;div class="modal fade" id="modal-display"&gt;
     &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
       &lt;div class="modal-header"&gt;
       &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
        &lt;h4 class="modal-title"&gt;Search results&lt;/h4&gt;
       &lt;/div&gt;
      &lt;div class="modal-body"&gt; 
        &lt;div class="container"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-5"&gt;Hello&lt;/div&gt;
            &lt;div class="col-md-5"&gt;i!!!!&lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>EDIT:</p>
  
  <p><img src="https://i.stack.imgur.com/nen26.png" alt="modal-backdrop div"></p>