Bootstrap 模式在 3.3.6 中不起作用

Question

我有一个简单的页面和一个模式。这在 bootstrap 的（很多）旧版本中有效，但自从我升级到较新的版本后，它就不再是 "not working" 了：

页面加载，然后变暗（一切正常！），但是模式 window 根本没有出现，我可以（因此？）也不会点击它...

html 模态：

<div class="modal hide fade" id="myModal">
  <div class="modal-header" style="background:#f6b33d -moz-linear-gradient(center top , #f6b33d 5%, #d29105 100%) repeat scroll 0 0;">
    <a class="close" data-dismiss="modal">×</a>
    <h3 style="color:#ffffff;">Please Note:</h3>
  </div>
  <div class="modal-body">
    <p>You can put whatever text you want in here... or form or whatever you want..</p>
  </div>
</div>

js:

$(window).load(function(){
   setTimeout(function(){
       $('#myModal').modal('show');
   }, 5000);
});

见http://codepen.io/Malachi/pen/bpLrPy

我错过了什么？？

Answer 1

确保您没有使用 hide class。模态标记应该是这样的。

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header" style="background:#f6b33d -moz-linear-gradient(center top , #f6b33d 5%, #d29105 100%) repeat scroll 0 0;">
          <a class="close" data-dismiss="modal">×</a>
          <h3 style="color:#ffffff;">Please Note:</h3>
        </div>
        <div class="modal-body">
          <p>You can put whatever text you want in here... or form or whatever you want..</p>
        </div>
      </div>
    </div>
</div>

http://bootply.com/14LH4kZul2

Answer 2

删除隐藏并添加div.modal-dialog和div.modal-content（这就是模态在 bootstrap 上的工作方式）

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header" style="background:#f6b33d -moz-linear-gradient(center top , #f6b33d 5%, #d29105 100%) repeat scroll 0 0;">
          <a class="close" data-dismiss="modal">×</a>
          <h3 style="color:#ffffff;">Please Note:</h3>
        </div>
        <div class="modal-body">
           <p>You can put whatever text you want in here... or form or whatever you want..</p>
        </div>
      </div>
  </div>
</div>

如果您不确定，请从 bootstrap 网站查看这些示例：http://getbootstrap.com/javascript/#modals

Bootstrap 模式在 3.3.6 中不起作用

Bootstrap modal not working in 3.3.6

jquery

twitter-bootstrap

bootstrap-modal

twitter-bootstrap-3