twitter-bootstrap - Bootstrap Modal 立即消失

Question

我正在使用 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>

问题是，一旦我单击按钮，模式就会淡入，然后立即消失。

如果有任何帮助，我将不胜感激。

另外，如何更改下拉三角形的颜色(指向上方，不悬停)？我正在开发一个基于橙色和棕色的网站，蓝色的东西真的很烦人。

Answer 1

可能的原因

这是 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 行，然后验证现在模式是否能按预期运行。