title: Exposing element outside modal-backdrop in CSS Bootstrap jquery modal
body: <p>I'm using CSS Bootstrap's Modal feature, and it's working perfectly. However, I want to add a functionality that while the modal dialog is open and the rest of the web page is covered up by the .modal-backdrop, one of the outside elements from a different place within the scope of the page's structure can be exposed on top of the backdrop:</p>
  
  <pre><code>&lt;div id="outside-element"&gt;
    I want this element exposed even while the modal is active,
    upon clicking the button in the modal dialog box
  &lt;/div&gt;
  
  &lt;div id="help-box" class="modal fade" data-backdrop="static" data-keyboard="false" data-show="true" tabindex="-1" role="dialog" aria-labelledby="help-label" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-body"&gt;
                Click this button to show the outside element:
                &lt;button type="button" class="btn" aria-hidden="true" id="test-item"&gt;Click it!&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
    (function($) {
       $('#test-item').click(function() {
          $('#outside-element').attr('style','zIndex:1041');
       });
    })(jQuery);
  &lt;/script&gt;
  </code></pre>
  
  <p>As you can see in my current attempt above, I'm setting the z-index of the outside element to 1041, which is one higher than the .modal-backdrop setting (1040). This is not accomplishing what I want it to (namely, placing the #outside-element on top of the modal backdrop), even though the code is sound and "working" (that is, it's definitively modifying the z-index).</p>