在 CSS Bootstrap jquery modal 中将元素暴露在 modal-backdrop 之外

我正在使用 CSS Bootstrap 的 Modal 功能，它运行得很好。但是，我想添加一项功能，当模式对话框打开并且网页的其余部分被 .modal-backdrop 覆盖时，来自页面结构范围内不同位置的外部元素之一可以是暴露在背景之上：

<div id="outside-element">
  I want this element exposed even while the modal is active,
  upon clicking the button in the modal dialog box
</div>

<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">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
              Click this button to show the outside element:
              <button type="button" class="btn" aria-hidden="true" id="test-item">Click it!</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
  (function($) {
     $('#test-item').click(function() {
        $('#outside-element').attr('style','zIndex:1041');
     });
  })(jQuery);
</script>

正如您在上面当前的尝试中所看到的，我将外部元素的 z 索引设置为 1041，这比 .modal-backdrop 设置 (1040) 高 1。这并没有实现我想要的效果（即，将 #outside-element 放在模态背景的顶部），即使代码是健全的并且“有效”（也就是说，它最终修改了 z-index）。

如果您有一个小提琴以我们可以运行它并查看发生了什么的方式显示您的代码，那就太好了。

您需要包含元素的位置，z 索引才能生效：

#outside-element {
   position: relative;
   z-index: 1041;
}