我发现:

在bootstrap 3.3.0中这是不正确的，但在bootstrap 3.3.5中这是正确的。让我们看看代码。 3.3.0:

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

  this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)

我只是从_modal中删除了position: fixed样式。SCSS文件，它似乎为我工作良好。我仍然有背景和它的工作预期。

// Modal background
.modal-backdrop {
  /* commented out position: fixed - bug fix */
  //position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-modal-backdrop;
  background-color: $modal-backdrop-bg;
  // Fade for backdrop
  &.fade {
    opacity: 0;
  }

向Rick Strahl在“引导模式对话框显示在模式背景下”中的指导致敬。

在我的情况下，解决方案是简单的，我忘记在div上添加id“my-modal”的“modal”类，由$('#my-modal').modal('show')提升;

因为div的内容包含了所有需要的内容，所以除了上面的覆盖之外，屏幕上的结果几乎是完美的。

我敢打赌，其他与z-index技巧或其他css技巧无关的父div或未关闭div的位置的答案也可能是在这种情况下。

我也有同样的问题，也检查了Muhd的答案。

但是，我的模态需要左，顶部属性，所以只要把固定位置改为绝对，它就工作了。

.modal {
    position: absolute;
}

嗨，我有同样的问题，然后我意识到，当你使用bootstrap 3.1 不同于旧版本的bootstrap (2.3.2) 模态的HTML结构被改变了!

你必须用模态对话框和模态内容来包装你的模态页眉、页脚

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>

在我的例子中，原因是boostrap.min.css。当我将它作为参考从HTML文件中排除后，对话框显示在模态阴影前面。