引导模式未按预期显示和行为答案

【问题标题】：Bootstrap modal not displaying and behaving as expected引导模式未按预期显示和行为
【发布时间】：2014-03-15 14:02:20
【问题描述】：

我已从 twitter bootstrap 复制并粘贴示例代码，以在我的 WordPress 投资组合网站中创建一个基本的模式窗口。

<div class="modal hide fade">
  <div class="modal-header">
  <a href="#" class="btn btn-primary">Save changes</a>
  <a href="#" class="btn">Close</a>
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;  </button>
  <h3>Modal header</h3>
  <p>One fine body…</p>
  </div>
  </div>
  </div>
  <div class="modal-body">
  <div class="modal-footer">
</div>

最初，该框在加载文档时可见，这是不需要的。单击十字按钮或关闭按钮时无法关闭它。

联系按钮是我添加模态触发按钮的地方代码，

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

单击此按钮时，背景会根据需要变暗，然后可以关闭框。但是，在此事件之后，无法使用主导航。我想在某个地方有一个简单的冲突。欢迎任何有关如何解决问题的建议。该网站位于http://sandpit.jonathanbeech.co.uk/

【问题讨论】：

你添加了引导 css 和 js 文件吗？
那些存在并且我检查了查看源代码，它们似乎正在显示并正确加载。我想知道是否存在以前的样式冲突。使用 Google Chrome 的检查元素初步查看 css 似乎表明情况并非如此。
@JonathanBeech - 如果可能，请删除中加载的所有其他 js 库，除了运行引导程序所需的库并查看是否可以解决它。由于命名空间问题，我已经看到自定义 JqueryUI 类型库会干扰 BS。 dullsharpness.com/2013/04/29/…
@JonathanBeech 是的，我也在检查它，我确实看到你在 Bootstrap CSS 中缺少一个隐藏类的条目，这就是模式出现在页面加载 .hide{display:none} 上的原因。但这并没有解决它无法正常工作的问题。我认为这可能是@cerd 建议的 JS 冲突。要尝试的另一件事是加载完整的 Bootstrap JS 和 CSS，因为我注意到您只有模态组件
非常感谢，我会尽快查看并更新我的最新情况。

标签： twitter-bootstrap modal-dialog

【解决方案1】：

试试这个：

从模态 div 中删除类 hide：
<div class="modal ~~hide~~ fade">
将id 属性添加到模态div：id="myModal"

【讨论】：