title: Allow people to click on links under bootstrap modal when modal backdrop is not present
body: <p>I have a very basic page made with Bootstrap.
  Using javascript I made an auto-loading modal that appears when the page loads and disappears after 3 seconds. I removed the grey backdrop that usually comes along Bootstrap modals.</p>
  
  <p>What I'd like it for people to be able to click on the text and links that are really placed on the page.</p>
  
  <p>Bascially, while the modal stays open (3 sec), all the links below become unclickable (the mouse becomes a pointer even!)</p>
  
  <p>Here is a fiddle to show you the situation (note that I don't mange to make the modal appear on this jsfiddle while it does work on computer): <a href="http://jsfiddle.net/DTcHh/6808/" rel="nofollow">http://jsfiddle.net/DTcHh/6808/</a> (I'd like to be able to click on the button called 'Here is for example a link I'd like people to be able to click while modal is open')</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="navbar navbar-default"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;a class="navbar-brand" href="#"&gt;Bootstrap 3&lt;/a&gt;
          &lt;/div&gt;
  
  
      &lt;div class="jumbotron"&gt;
          &lt;h1&gt;Twitter Bootstrap 3.0&lt;/h1&gt;
          &lt;p class="lead"&gt;Starter template with CSS and JS included.&lt;/p&gt;
          &lt;p&gt;&lt;a class="btn btn-lg btn-primary" href="http://yahoo.fr" target="_blank"&gt;Here is for example a link I'd like people to be able to click while modal is open&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
  
      &lt;div class="modal in" id="notificationModal" role="dialog" aria-labelledby="notificationModalLabel" aria-hidden="true" data-backdrop="false"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
  
          &lt;h3 class="modal-title" id="notificationModalLabel" style="color:#DF2943;"&gt;
            How to take part in the deal?
             &lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;   
          &lt;h4 style="margin-top:0px"&gt;
          some explanations
        &lt;/h4&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(window).load(function(){
      $('#notificationModal').modal('show');    
      $('#notificationModal').fadeTo(3000, 500).slideUp(500, function(){
        $(this).remove(); 
      });
  
    });
  </code></pre>
  
  <p>How to achieve this?</p>