首页 > 其他 > 详细

模态弹框(Modal)简单实用

时间:2017-09-08 17:11:37      阅读:169      评论:0      收藏:0      [点我收藏+]

1.需要引用bootstrap的js、css文件,且需引用jquery文件,因为bootstrap的js依赖jquery

<script type="text/javascript" src="../assets/js/jquery.2.1.1.min.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="../assets/css/bootstrap.css"/>

2.详细说明:

  • 使用Button触发弹框,通过data-target="modal的ID"来定义想要加载哪个模态框。
  • 定义Modal使用到的Bootstrap样式:
    1. modal:用来把 <div> 的内容识别为模态框。
    2. fade:切换效果,当模态框被切换时,它会引起内容淡入淡出。
    3. aria-hidden、aria-label和aria-labelledby为无障碍网页相关字段。
<button class="btn btn-primary form-control" data-toggle="modal" data-target="#myModal">弹出模态框</button>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    标题
                </div>
                <div class="modal-body">您有一条新短消息,请注意查收!</div>
                <div class="modal-footer"><button class="btn btn-info" data-dismiss="modal">确认</button></div>
            </div>
        </div>
    </div>

 

模态弹框(Modal)简单实用

原文:http://www.cnblogs.com/ende/p/7495312.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!