加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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">&times;</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/

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读