twitter-bootstrap – 页面加载时的Bootstrap模式打开

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 页面加载时的Bootstrap模式打开前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参见英文答案 > Launch Bootstrap Modal on page load16个
我有一个带有bootstrap模式的页面(手册: http://getbootstrap.com/javascript/#modals).

我想在页面加载时打开这个模态.然而,这种情况并没有发生.

  1. <!-- Modal -->
  2. <div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
  3. <div class="modal-dialog">
  4. <div class="modal-content">
  5. <div class="modal-header">
  6. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  7. <h4 class="modal-title" id="memberModalLabel">Thank you for signing in!</h4>
  8. </div>
  9. <div class="modal-body">
  10. <p>However the account provided is not known.<BR>
  11. If you just got invited to the group,please wait for a day to have the database synchronized.</p>
  12.  
  13. <p>You will now be shown the Demo site.</p>
  14. </div>
  15. <div class="modal-footer">
  16. <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
  17. </div>
  18. </div>
  19. </div>
  20. </div>
  21.  
  22. <script type="text/javascript">
  23. <!--
  24. $('#memberModal').modal('show');
  25. //-->
  26. </script>

现在,如果我在代码添加一个按钮.按下按钮时,模态打开.

  1. <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#memberModal">
  2. Launch modal
  3. </button>

我尝试了几件事,但是我无法让它在页面加载时打开模态.
我在html头中调用了bootsrap的js和css.

  1. <!-- Bootstrap - Latest compiled and minified CSS -->
  2. <link rel="stylesheet" type='text/css' href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  3.  
  4. <!-- Bootstrap - Latest compiled and minified JavaScript -->
  5. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  6. <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

我究竟做错了什么?

解决方法

在您的通话中使用document.ready()事件.
  1. $(document).ready(function () {
  2.  
  3. $('#memberModal').modal('show');
  4.  
  5. });

jsFiddle已更新 – http://jsfiddle.net/uvnggL8w/1/

猜你在找的Bootstrap相关文章