引导模式在 3.3.6 中不起作用答案

【问题标题】：Bootstrap modal not working in 3.3.6引导模式在 3.3.6 中不起作用
【发布时间】：2016-04-11 14:34:38
【问题描述】：

我有一个简单的页面和一个模式。这在（很多）旧版本的引导程序中有效，但由于我升级到新版本，它不再“工作”了：

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

模态的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

我错过了什么？？

【问题讨论】：

标签： jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

移除 hide 并添加 div.modal-dialog 和 div.modal-content（这就是模式在引导程序上的工作方式）

<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://getbootstrap.com/javascript/#modals

【讨论】：

【解决方案2】：

确保您不使用 hide 类。模态标记应该是这样的。

<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

【讨论】：