参见英文答案 >
Launch Bootstrap Modal on page load16个
我有一个带有bootstrap模式的页面(手册: http://getbootstrap.com/javascript/#modals).
我有一个带有bootstrap模式的页面(手册: http://getbootstrap.com/javascript/#modals).
我想在页面加载时打开这个模态.然而,这种情况并没有发生.
<!-- Modal --> <div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="memberModalLabel">Thank you for signing in!</h4> </div> <div class="modal-body"> <p>However the account provided is not known.<BR> If you just got invited to the group,please wait for a day to have the database synchronized.</p> <p>You will now be shown the Demo site.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script type="text/javascript"> <!-- $('#memberModal').modal('show'); //--> </script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#memberModal"> Launch modal </button>
我尝试了几件事,但是我无法让它在页面加载时打开模态.
我在html头中调用了bootsrap的js和css.
<!-- Bootstrap - Latest compiled and minified CSS --> <link rel="stylesheet" type='text/css' href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- Bootstrap - Latest compiled and minified JavaScript --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
我究竟做错了什么?
解决方法
在您的通话中使用document.ready()事件.
$(document).ready(function () { $('#memberModal').modal('show'); });
jsFiddle已更新 – http://jsfiddle.net/uvnggL8w/1/