Question

我正在使用Twitter Bootstrap的Modal插件，它一切正常，而且控制台没有显示javascript错误，但我的问题是它在页面加载时打开了吗？我关闭模态，然后可以重新打开它没有问题，但它只是在我重新加载页面时保持打开。这是我的标记

HTML 启动模式

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h3 id="myModalLabel">Modal header</h3>
</div>

   <div class="modal-body">
     <p>One fine body…</p>
   </div>

  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
     <button class="btn btn-primary">Save changes</button>
   </div>
  </div>

的Javascript

非常简单：P，

 <script>
 $('#myModal').modal()  
 </script>

Answer 1

$('#myModal').modal('hide')

试试这个

http://twitter.github.com/bootstrap/javascript.html#modals

Answer 2

实际上，调用$('#myModal').modal()会告诉模式现在显示而不是点击。您只需完全删除该通话。

如果为模态及其触发器使用正确的标记，则根本不需要javascript调用。这是引导程序的一个重要功能 - 通过静态标记获得动态行为。

Answer 3

如果您不希望在页面加载中显示模态，则无需使用任何javascript只需使用以下代码在Bootstrap中创建一个简单的模态

   <!-- Button trigger modal -->
   <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
     Launch demo modal
   </button>

   <!-- Modal -->
   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title" id="myModalLabel">Modal title</h4>
         </div>
         <div class="modal-body">
           <h1>Hello World!</h1>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           <button type="button" class="btn btn-primary">Save changes</button>
         </div>
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->

jQuery / Bootstrap - Twitter Bootstrap模式打开页面加载？

3 个答案: