Question

我正在使用CSS Bootstrap的模态功能，它运行正常。但是，我想添加一个功能，当模态对话框打开而网页的其余部分被.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-index设置为1041，这比.modal-backdrop设置（1040）高一个。这并没有实现我想要的东西（即，将#outout-element放在模态背景的顶部），即使代码是声音和“工作”（也就是说，它最终修改了z-index）。 / p>

Answer 1

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

您需要包含元素的位置，以使z-index生效：

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

Answer 2

.modal-backdrop的z-index为1040，但.modal本身（#help-box）的z-index为1050，所以如果你的外部元素需要在背景前面和在对话框前面，你必须给它一个1051而不是1041的z-index。

如果它只需要在背景前面，但不会与对话框重叠，那么应该使用1041的z-index，但是，正如@uapuap所提到的，你还需要给出它是一个位置，如position: relative。

这里有一个显示它工作的小提琴，外部元素只在背景前面，z-index为1041和position: relative：

http://jsfiddle.net/fgyja20w/

在CSS Bootstrap jquery模式中公开模态背景之外的元素

2 个答案: