Html 引导4模式在显示时未聚焦

我使用Bootstrap4来显示模式，当我点击按钮来显示它时出现了一个问题，因为它没有显示在其他页面内容上。 这就是我正在尝试的：

    <div class="add-advertise">
                <button type="button" data-toggle="modal" data-target="#advertiseModal" class="btn btn-primary">AddAdvertise</button>
            </div>
    <!-- The Modal -->
<div class="modal" id="advertiseModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>

添加广告
模态标题
&时代；
情态体。。
接近

如图所示：

---

如何解决此问题？

考虑将模态移动到

body

元素下的直接子级

从那时起：

还要注意的是，嵌套起着很大的作用。如果元素B位于元素A的顶部，则元素A的子元素永远不能高于元素B

---

看起来覆盖层显示在内容上。使用DOM检查器检查元素的

x-index

，并更新它们是的，我有一个带有z-index 1002的主标题。如何更新modal的z-index，使其显示在标题上方，而不删除标题的z-index，使其

z-index

高于overlay@rawanmansour考虑将模态移动为在

正文

元素下引导子元素。很高兴它为你解决了这个问题。只是添加了它作为任何其他登陆此线程的人的答案。