twitter-bootstrap – 页面加载时的Bootstrap模式打开
发布时间:2020-12-18 00:22:04 所属栏目:安全 来源:网络整理
导读:参见英文答案 Launch Bootstrap Modal on page load16个 我有一个带有bootstrap模式的页面(手册: http://getbootstrap.com/javascript/#modals). 我想在页面加载时打开这个模态.然而,这种情况并没有发生. !-- Modal --div class="modal fade" id="memberMod
参见英文答案 >
Launch Bootstrap Modal on page load16个
我有一个带有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> 我尝试了几件事,但是我无法让它在页面加载时打开模态. <!-- 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/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |