我正在使用 bootstrap 开发一个网站。
基本上,我想在主页中使用一个模态,通过英雄单元中的按钮召唤。
按钮代码:
<button type="button"
class="btn btn-warning btn-large"
data-toggle="modal"
data-target="#myModal">Open Modal</button>
模态代码:
<div class="modal hide fade" id="myModal" 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">In Costruzione</h3>
</div>
<div class="modal-body">
<p>Test Modal: Bootstrap</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
<button class="btn btn-warning">Salva</button>
</div>
</div>
问题是,一旦我单击按钮,模式就会淡入,然后立即消失。
如果有任何帮助,我将不胜感激。
另外,如何更改下拉三角形的颜色(指向上方,不悬停)?我正在开发一个基于橙色和棕色的网站,蓝色的东西真的很烦人。
最佳答案
可能的原因
这是 Modal 插件的 JavaScript 加载两次时的典型行为。请检查以确保插件没有双重加载。根据您使用的平台,可以从多个源加载模式代码。一些常见的有:
- bootstrap.js(完整的 BootStrap JS 套件)
- bootstrap.min.js(与上面相同,只是缩小了)
- bootstrap-modal.js(独立插件)
- 依赖加载器,例如
require('bootstrap')
调试技巧
一个好的起点是检查注册的 click
使用浏览器中的开发人员工具的事件监听器。例如,Chrome 会列出 JS 源文件,其中可以找到注册监听器的代码。另一种选择是尝试在页面上的源中搜索模态代码中找到的短语,例如 var Modal
.
不幸的是,这些并不总是能在所有情况下找到东西。检查网络请求可以更加可靠,让您了解页面上加载的所有内容。
一个(损坏的)演示
下面是加载 bootstrap.js 和 bootstrap-modal.js 时发生的情况的演示(只是为了确认您的体验):
Plunker
如果您向下滚动到该页面上源代码的底部,您可以删除或注释掉 <script>
bootstrap-modal.js 行,然后验证现在模式是否能按预期运行。
关于twitter-bootstrap - Bootstrap Modal 立即消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13648979/