Question

我有一个简单的页面和一个模态。这在一个（很多）旧版本的bootstrap中工作，但是自从我升级到更新的版本后，它就没有工作了＃34;了：

页面加载，然后变暗（一切都好！），但模态窗口根本没有出现，我可以（因此？）也没有点击它...

模态的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);
});

请参阅View on Codepen

我错过了什么？

Answer 1

删除隐藏并添加 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>

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

Answer 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

Bootstrap模式在3.3.6中不起作用

2 个答案: