title: Can't click on nav-bar, body when modal is open
body: <p>Currently I'm using modal like a popup at bottom of webpage.</p>
  
  <pre><code>    &lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;a class="navbar-brand" href="#"&gt;WebSiteName&lt;/a&gt;
      &lt;/div&gt;
      &lt;ul class="nav navbar-nav"&gt;
        &lt;li class="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="page1.html"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;div class="modal fade" id="slide-bottom-popup"  data-backdrop="false"&gt;
      &lt;div class="modal-body"&gt;
          &lt;button id="close" type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
          &lt;h4&gt;Cennos Commandments&lt;/h4&gt;
          &lt;ul&gt;
              &lt;li&gt;Commandments 1&lt;/li&gt;
              &lt;li&gt;Commandments 2&lt;/li&gt;
              &lt;li&gt;Commandments 3&lt;/li&gt;
              &lt;li&gt;Commandments 4&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /.modal-body --&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;  
  </code></pre>
  
  <p>CSS for modal</p>
  
  <pre><code>.modal.fade.in .modal-body {
      bottom: 0; 
      opacity: 1;
  }
  .modal-body {
      position: absolute;
      bottom: -250px;
      right: 0%;
      padding: 30px 15px 15px;
      width: 275px;
      height: 250px;
      background-color: #e5e5e5;
      border-radius: 6px 6px 0 0;
      opacity: 0;
      -webkit-transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
      -moz-transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
      -o-transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
      transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
  }
  .close {
      margin-top: -20px;
      text-shadow: 0 1px 0 #ffffff;
  }
  body.modal-open {
      overflow: scroll;
  }
  </code></pre>
  
  <p>Script to make it open on page load</p>
  
  <pre><code>$(document).ready(function() {
  setTimeout(function() {
    $('#slide-bottom-popup').modal('show');
  }, 0); // milliseconds
  });
  </code></pre>
  
  <p>I realize that I have to close the modal first before I can click or select on body or nav-bar to go to other pages. Is there anyway that I can keep the modal open and still can use body,nav-bar at the same time.</p>
  
  <p>Sorry for my bad English. Thanks you.</p>