twitter-bootstrap - 引导模式未按预期显示和行为

Question

我从 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…&lt;/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/

Answer 1

尝试这个：

1. hide从模态 div 中 删除类：
   <div class="modal hide fade">
2. id向模态 div添加一个属性：id="myModal"