引导模式 - 屏幕变黑答案

【问题标题】：Bootstrap modal - screen goes black引导模式 - 屏幕变黑
【发布时间】：2025-11-23 03:50:01
【问题描述】：

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

首先，工作模式：

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

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

【问题讨论】：

当你多次创建相同的东西时，使用 class 而不是 id。
@stanze 他正在正确使用它。那里有什么问题？

标签： javascript jquery twitter-bootstrap modal-dialog

【解决方案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

【讨论】：

我也尝试过，但产生了相同的结果。
@Mefhisto1 你有其他修改它们的脚本或 CSS 吗？好吧，做一件事。右键单击黑屏并检查模态窗口。
@Mefhisto1 你在任何地方都有工作演示吗？

【解决方案2】：

我在 bootply 中创建了一些模式并修改了您的代码，看看这是否有帮助。

bootply example

【讨论】：

此答案中的链接不再有效，因此不知道解决方案是什么。这个类似的问题仍然是当前的答案，可能是后来来到这里的人的线索：*.com/questions/10636667/…。在我的情况下，这是由于错误的模态在一个固定位置的父级内，导致背景被添加到它上面。

【解决方案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

【讨论】：

【解决方案4】：

您需要这样做才能修复。

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

【讨论】：

【解决方案5】：

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

【讨论】：