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…</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

试试这个：

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

Bootstrap模式不显示和按预期运行

1 个答案: