如果模态容器具有固定或相对位置，或者位于具有固定或相对位置的元素内，则会发生此行为。

确保以默认方式定位模态容器及其所有父元素以解决问题。

这里有几种方法可以做到这一点：

1. 最简单的方法是移动模态 div，使其位于任何具有特殊定位的元素之外。一个好地方可能就在结束 body 标签之前</body>。
2. 或者，您可以position:从模态及其祖先中删除CSS 属性，直到问题消失。但是，这可能会改变页面的外观和功能。

问题与父容器的定位有关。您可以轻松地将模态从这些容器中“移出”，然后再显示。如果您show使用 js 对模态进行操作，请执行以下操作：

$('#myModal').appendTo("body").modal('show');

或者，如果您使用按钮启动模态，请删除.modal('show');并执行以下操作：

$('#myModal').appendTo("body") 

这将保留所有正常功能，允许您使用按钮显示模态。

我尝试了上面提供的所有选项，但没有使用这些选项使其正常工作。

什么起作用了：将 .modal-backdrop 的 z-index 设置为 -1。

.modal-backdrop {
  z-index: -1;
}

另外，请确保 BootStrap css 和 js 的版本是相同的。不同的版本也可以使模态出现在背景下：

例如：

坏的：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

好的：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

我也遇到过这个问题，在我发现我实际上不需要背景之前，没有一个解决方案对我有用。您可以使用以下代码轻松删除背景。

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

注意：该data-backdrop属性需要设置为false（其他选项：static或true）。