引导模式 - 屏幕变黑

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');

它基本上是两个相同的模式，但是对于第二个模式，屏幕只是变黑，而第一个模式可以正常工作。我认为这是我正在使用的课程之一。这里似乎出了什么问题？

Answer 1

您这里有错字：

<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

Answer 2

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

bootply 示例

Answer 3

我认为这里真正要做的是通过更改以下内容来删除 div 标签中的隐藏类：

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

到此

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

如果您浏览引导文档，您将看不到添加隐藏类的位置：http://getbootstrap.com/javascript/#modals

Answer 4

您需要执行此操作来修复。

$("#deleteConfirmation").prependTo("body");

Answer 5

这个对我有用。 $("#deleteConfirmation").prependTo("body");

Answer 6

可能是任何 div 内的引导模型，尝试将主体的末端放置:)