使用 Bootstrap 模態未顯示模態背景

Question

我正在使用 Bootstrap 的模態插件，但由於某種原因沒有顯示背景。

當我在 W3Schools 上檢查相同的代碼時，我注意到每次打開模態時都會生成一個div ：

<div class="modal-backdrop fade in"></div>

我得到了與 W3Schools 完全相同的代碼，但是這個div不是在我的網站上生成的。

我該如何解決？

Answer 1

當我使用錯誤的方法打開模態時，這發生在我身上。 我有

$('#myModal').show()

當然應該是什么時候

$('#myModal').modal('show')

使用錯誤方法的另一個症狀，除了沒有顯示半透明背景外，模態中的關閉按鈕也不起作用。

Answer 2

請通過檢查<div class="modal-backdrop fade in"></div>元素來檢查 CSS 屬性是否被覆蓋。 大多數情況下，這可能是由覆蓋引起的 CSS 問題。

Answer 3

無法重現這一點，因為 w3 學校示例工作正常。

驗證以下內容。 這可能會導致問題：

• 將<div class="modal">..放在文件末尾或</body>之前是一個好習慣
• 如果任何其他 css 類覆蓋了 modal-backdrop 類
• 如果 jquery 和 bootstrap JS 添加正確

從http://getbootstrap.com/javascript/#modals-examples獲取模態