Bootstrap模态框未显示。

Question

我从Twitter Bootstrap复制并粘贴了示例代码，在我的Rails 3.2应用程序中创建了一个基本的模态窗口：

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<a href= "#myModal"  role="button" class="btn" data-toggle="modal">Launch demo modal</a>

它不能工作。这不是由于 jQuery 或脚本未加载，因为 a) 它不需要加载任何 js，因为它使用数据定位和 b) 我检查了控制台，一切都运行得完美。

也不是因为我同时包含了 boostrap.js 和 bootstrap-modal.js ... 我已经检查过了，没有这样做。

我束手无策。它应该只是起作用的。其他 bootstrap js 在网站上工作得很好。

我唯一能想到的是与 .hide 和 .fade 类的定义有关 - 当我将它们移除时，模态框可以正常显示。当我包括它们时，它就根本不会显示出来。

jQuery UI 会对此造成干扰吗？

请询问我您可能需要帮助的任何进一步信息...

更新：

所以我认为我看到了问题，但我不知道如何解决。当我检查控制台时，就在顶部，我看到

element.style {
display: none;
}

现在它以某种方式成为

的一部分，因此在控制台中看起来像这样：

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;" >

但我不知道为什么它会添加在里面，或者来自哪里。我该如何追踪这个问题？

谢谢

- jfdimark

Answer 1

我找到了原因。

如果您无法找出问题所在，请尝试在应用程序的任何样式表中搜索“modal”、“fade”、“fade in”和“hide”的任何类别。这对于任何来到这个问题的人都有一定的通用性。

我在一个随机的CSS文件中只定义了一个“fade”的实例，这就是它无法正常显示的原因，因为它会覆盖Bootstrap。一旦我删除了该引用，一切都好了。

- jfdimark

---

".in { display:block }" 在 Bootstrap 3.0 中似乎是另一个值得探究的类。 - Squiggs.

当我包含了 angular-animate 时，我遇到了同样的问题，将其移除后问题得到解决。 - pfried

让我生你的孩子！ - Danny Mahoney

我有所有的点赞。 - Teoman Tıngır

对我来说，像是在谷歌搜索“bootstrap modal”链接到旧文档一样愚蠢。确保选择您当前的版本！ - ntoonio

Answer 2

如果你从Bootstrap 2.3.2升级到Bootstrap 3，那么你需要从任何模态框的div中移除'hide'类。

- paul

---

现在似乎不是这种情况，所以当前版本中使用了 fade。参考链接。 - Timo

Answer 3

我遇到了同样的问题。对我而言，原因是在启动按钮中使用了过时的data-toogle和data-target属性，而同时使用了Bootstrap 5。

纠正后：

<button type="button" class="btn" data-toggle="modal" data-target="#myModal" >

<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#myModal"> 

它正常运行。

- Schneider Infosystems Ltd

---

获取所有我的宝贝再加上一个。这里是它。 - Timo

完全同意大多数示例都已过时或与使用的Bootstrap版本不兼容。感谢@Schneider注意到我的问题，并将data-target替换为data-bs-target。同样感谢@Timo，只需按照实际文档中的示例即可解决问题。 - Osama Hussein

还记得将"data-dismiss"更改为"data-bs-dismiss"。 - Antti A

谢谢。我一直在找我缺了什么，然后找到了这个。它起作用了。 - undefined

Answer 4

如果您正在使用Bootstrap 4，则可能是由于Bootstrap css中的“.fade：not（.show）{opacity：0}”导致您的模态框没有“show”类。而它没有“show”类的原因可能是由于您的页面未加载jQuery，Popper和Bootstrap Javascript文件。

（Bootstrap Javascript将自动向您的对话框添加“show”类。）

参考资料：https://getbootstrap.com/docs/4.3/getting-started/introduction/

- ScottyB

---

是的，这个关于Bootstrap 4 CSS的正确答案是在没有Bootstrap Javascript文件的情况下加载的。 - Hieu

Answer 5

Change you Code To something like this,

<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<a class="btn" data-target="#myModel" role="button" data-toggle="modal">Launch demo modal</a>

尝试使用 data-target="#ModelId" 一次，也许它可能是引起问题的原因。

其次，如果您已经多次包含了 JQuery，请删除其中的重复项，并仅包含一次。有时这也会防止模型出现问题。

- Kiran Maniya

Answer 6

进一步解释@jfdimark的回答。这很可能是由于已加载的CSS中某个相同的CSS类名导致的。因此，不要将modal类定义为“modal fade”，而应将其更改为“modal fade in”，然后再试一次。

- zinmyintnaung

---

这应该作为评论发布在相关答案下。如果您因声望不足而无法发表评论，可以等待直到有足够的声望。 - Benjamin Urquhart

Answer 7

作为 Paula，我遇到了同样的问题，我的模态框没有显示出来，后来我意识到我的按钮在一个"< form >"标签内...

<button class="btn btn-danger" data-toggle="modal" data-target="#deleteItemModal">Delete</button>

我刚刚把<button>替换成了<a>，我的模态框（modal）正常工作了。

<a class="btn btn-danger" data-toggle="modal" data-target="#deleteItemModal">Delete</a>

- Fox5150

---

谢谢，我忘记添加 data-toggle 和 data-target。 - Ferhi Malek

Answer 8

可能这种情况很少见，但是如果有人有类似问题的话，我无法添加评论，所以我在这里留下来： 我遇到了一个类似的问题，处理别人的代码时，当我添加“.fade”类时模态框没有显示出来，问题在于.modal-backdrop的一些CSS：

.modal-backdrop {display: none;}

在移除之后，模态框可以正常显示。

- realife

Answer 9

如果你正在使用自定义CSS而不是在HTML页面中将模态框类定义为"modal fade"或"modal fade in"，请将其更改为仅使用"modal"，然后再尝试。

- ELYAS AYALEW

Answer 10

我曾经遇到相同的问题，后来发现我的<button>标签上写了type="submit"，而Bootstrap要求必须是type="button"。

- Paula