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的一部分,所以在控制台中它看起来像这样:

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

但我不知道为什么要添加它,或者从哪里添加它.我该如何追踪？

谢谢

Answer 1

我有同样的问题。对我来说，原因是在启动按钮中使用了过时的 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"> 

它运行正确。

Answer 2

如果你已经从Bootstrap 2.3.2升级到Bootstrap 3,那么你需要从你的任何模态div中删除'hide'类.

Answer 3

我找到了原因.

只是为了给这个问题的任何人提供一些普遍的用处.如果你无法弄清楚什么是错的,试着在你的应用程序的任何样式表中对'modal''淡入淡出''淡入'和'隐藏'进行'搜索全部'.

我在一个随机的css文件中定义了一个'fade'实例,这就是它在覆盖bootstrap时停止显示的内容.删除引用后,一切正常.

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/