Bootstrap 4 模式在顯示時未聚焦

Question

我正在使用 bootstrap 4 來顯示模態，當單擊按鈕以顯示它時出現問題，它沒有出現在其他頁面內容上。 這就是我正在嘗試的：

    <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>

像這張照片：

我怎么解決這個問題？

Answer 1

考慮將模態移動到您的body元素下的直接子元素。

來自Sara Cope關於CSS 技巧：

另請注意，嵌套起着重要作用。 如果元素 B 位於元素 A 的頂部，則元素 A 的子元素永遠不會高於元素 B。