Bootstrap 模式 - 屏幕变黑

Question

我有两个模式，它们在单击按钮时弹出。一个工作正常，但是对于第二个，屏幕变黑并且没有任何反应：

一、工作模式：

 <div id="deleteConfirmation" class="hidden, modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <h5>Are you sure you want to delete this contact?</h5>
      <button id="deleteOk">
        Yes
      </button>
      <button id="deleteNo">
        No
      </button>
    </div>
  </div>
</div>

并弹出此命令：

 $('#deleteConfirmation').modal('show');

第二个，几乎相同，但不起作用：

 <div id="addContact" class="hidden, modal fade">
  <div class="modal-header">
    <h5>Add New Contact</h5>
  </div>
  <div class="modal-dialog">
    <div class="modal-content">
      <label>First Name </label><input /> <br />
      <label>Last Name </label><input /> <br />
      <label>Address </label><input /> <br />
      <label>Phone Number </label><input /> <br />

      <button id="addConfirm">
        Confirm
      </button>
    </div>
  </div>
</div>

和命令：

 $('#addContact').modal('show');

它基本上是两个相同的模态，但是对于第二个模态，屏幕变黑，而第一个模态正常工作。我假设这是我正在使用的课程之一。这里似乎有什么问题？

原文由 Mefhisto1 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在 bootply 创建了一些模式并调整了你的代码，看看这是否有帮助。

示例

原文由 Vitor Mateus 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你这里有一个错字：

 <div id="deleteConfirmation" class="hidden, modal fade">
<div id="addContact" class="hidden, modal fade">

去掉逗号：

 <div id="deleteConfirmation" class="hidden modal fade">
<div id="addContact" class="hidden modal fade">

因此脚本无法确定 hidden 类是否被正确应用，最终除了 黑屏 死机之外什么也看不到！ :O

原文由 Praveen Kumar Purushothaman 发布，翻译遵循 CC BY-SA 3.0 许可协议