Bootstrap插件(一)——模态框(modal.js)

前言:这一片文章我们将对bootstrap的modal模态框进行学习,学习他是如何绑定到一个按钮上去点击显示,学习模态框的简单数据配置,学习模态框的使用方式,事件,方法、参数等;下面是modal的内容总结。

目录:
    
    1.模态框的大小以及动画效果禁用
    2.通过button传递内容给绑定的modal
    3.模态框的调用方法
    4.模态框的一些配置参数以及作用
    5.模态框的一些方法
    6.模态框的事件监听

1.模态框的大小以及动画效果禁用
    模态框的大小用modal-lg和modal-sm属性去设置,而动画的限制我们需要不使用fade类,接下来还是使用一个示例,在实践中去理解,敲一遍什么都懂了。
  
示例代码:
1
<!DOCTYPE html>
2
<html>
3
<head lang="en">
4
    <meta charset="UTF-8">
5
    <title>组件</title>
6
    <!--引入bootstrap样式文件-->
7
    <link href="css/bootstrap.min.css" rel="stylesheet">
8
    <!--引入jq(必须在bootstrap.min.js文件之前)-->
9
    <script type="application/javascript" src="js/jquery-3.2.0.js"></script>
10
    <!--引入bootstrap js-->
11
    <script type="application/javascript" src="js/bootstrap.min.js"></script>
12
13
</head>
14
<body style="margin: 60px">
15
16
    <!--大模态框
17
        注意:(1)下面是通过data属性将button和modal绑定的,后面会学习js调用modal
18
             (2) 通过 data-target 绑定modal注意里面需要加 .号
19
    -->
20
    <button type="button" class="btn btn-danger" data-toggle="modal" data-target=".ex-modal-lg">大模态框</button>
21
22
    <div class="modal fade ex-modal-lg" tabindex="-1" role="dialog" aria-labelledby="largerModal">
23
        <div class="modal-dialog modal-lg" role="document">
24
            <div class="modal-content">
25
                <div class="modal-header">larger modal header</div>
26
                <div class="modal-body">
27
                    <img src="img/img.jpg" style="padding: 5px;">
28
                    larger modal body</div>
29
                <div class="modal-footer">larger modal footer</div>
30
            </div>
31
        </div>
32
    </div>
33
34
    <!--小模态框-->
35
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".ex-modal-sm">小模态框</button>
36
37
    <div class="modal ex-modal-sm" tabindex="-1" role="dialog" aria-labelledby="smallmodal">
38
        <div class="modal-dialog modal-sm" role="document">
39
40
            <div class="modal-content">
41
42
                <div class="modal-header">small modal header</div>
43
                <div class="modal-body">
44
                    <img src="img/img.jpg" style="padding: 5px;">
45
                    <br/>
46
                    small modal body</div>
47
                <div class="modal-footer">small modal footer</div>
48
            </div>
49
50
        </div>
51
    </div>
52
53
</body>
54
</html>
    效果截图:


  2.通过button传递内容给绑定的modal
        这个没什么好描述的,主要是js部分代码,请仔细看,直接上代码
1
<!DOCTYPE html>
2
<html>
3
<head lang="en">
4
    <meta charset="UTF-8">
5
    <title>组件</title>
6
    <!--引入bootstrap样式文件-->
7
    <link href="css/bootstrap.min.css" rel="stylesheet">
8
    <!--引入jq(必须在bootstrap.min.js文件之前)-->
9
    <script type="application/javascript" src="js/jquery-3.2.0.js"></script>
10
    <!--引入bootstrap js-->
11
    <script type="application/javascript" src="js/bootstrap.min.js"></script>
12
</head>
13
<body style="margin: 60px">
14
15
    <!--按钮传递参数并modal
16
        注意:(1)下面是通过data属性将button和modal绑定的,后面会学习js调用modal
17
             (2)依然是 data-target 绑定modal使用了css的选择器的语法可以使用 .号选择类和 #选择id
18
              (3) data-dismiss="modal"设置隐藏modal
19
    -->
20
    <button data-whatever="201987771" type="button" class="btn btn-danger" data-toggle="modal" data-target="#qqModal">qq邮箱modal</button>
21
22
    <div id="qqModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="largerModal">
23
        <div class="modal-dialog modal-sm" role="document">
24
            <div class="modal-content">
25
                <div class="modal-header">输入qq邮箱</div>
26
                <div class="modal-body">
27
28
                    <div class="input-group">
29
                            <input type="text" class="form-control" id="recipient-name">
30
                            <span class="input-group-addon" id="basic-addon1">@qq.com</span>
31
                    </div>
32
                <div class="modal-footer">
33
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
34
                    <button type="button" class="btn btn-primary">确定</button>
35
                </div>
36
            </div>
37
        </div>
38
    </div>
39
    </div>
40
</body>
41
</html>
42
43
<script type="text/javascript">
44
45
    $('#qqModal').on('show.bs.modal', function (event) {
46
47
        //获取到触发modal的button
48
        var button = $(event.relatedTarget);
49
50
        //获取button的传入值
51
        var recipient = button.data('whatever');
52
53
        console.log(recipient);
54
55
        //获取当前显示的modal
56
        var modal = $(this);
57
58
        //设置获取的值到输入框
59
        modal.find('.modal-body .input-group input').val(recipient)
60
    })
61
</script>
    效果截图


 
已经将默认的qq传递给了modal。
    
3.模态框的调用方法
    3.1)data属性调用有下面两种
1
    <!--(1)通过data-toggle="modal" data-target="#qqModal"启动 id为qqModal的modal-->
2
    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#qqModal">data-target调用modal框</button>-->
3
    <!--(2)通过data-toggle="modal" href="#qqModal"启动 id为qqModal的modal-->
4
    <button type="button" class="btn btn-danger"  data-toggle="modal" href="#qqModal">data href调用modal框</button>
   3.2)js调用显示modal框 
1
<script type="text/javascript">
2
3
    /*可以简单配置一些属性*/
4
    $('#qqModal').modal({
5
        backdrop:'static',
6
        keyboard:false,
7
        show:true
8
    })
9
</script>

4.模态框的一些配置参数以及作用
    其实上面3.2就配置了这些基本的属性,那作用是啥呢?看下面的总结表。
backdrop:'static' 设置显示灰色透明背景,但是点击不可关闭
backdrop:true 显示灰色半透明背景且点击非modal区域可关闭
backdrop:false 不显示灰色半透明背景且点击非modal区域不可关闭
keyboard:true 设置键盘 【ESC】键可关闭modal
keyboard:true 【ESC】键不能关闭modal
show:true 设置模态框初始化之后就立即显示出来
 
5.模态框的一些方法
1
            $('#wangModal').modal({});//可以传递一些配置参数,上面的示例代码有,可以看看
2
            $('#wangModal').modal('toggle');//手动切换modal框
3
            $('#wangModal').modal('show');//手动显示modal
4
            $('#wangModal').modal('hide');//手动隐藏modal
        还没有了解为什么多了这么多个方法,还不清楚他们各自的应用场景,先不提。

6.模态框的事件监听
    
    事件监听我们直接来一个代码示例,从代码来体会。
    先来看效果截图:

 示例代码:
1
<!DOCTYPE html>
2
<html>
3
<head lang="en">
4
    <meta charset="UTF-8">
5
    <title>组件</title>
6
    <!--引入bootstrap样式文件-->
7
    <link href="css/bootstrap.min.css" rel="stylesheet">
8
    <!--引入jq(必须在bootstrap.min.js文件之前)-->
9
    <script type="application/javascript" src="js/jquery-3.2.0.js"></script>
10
    <!--引入bootstrap js-->
11
    <script type="application/javascript" src="js/bootstrap.min.js"></script>
12
</head>
13
<body style="margin: 60px">
14
15
    <button class="btn bg-info show-modal">点我</button>
16
    <div id="wangModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="largerModal">
17
        <div class="modal-dialog modal-sm" role="document">
18
            <div class="modal-content">
19
                <div class="modal-header">隔壁老王给你打招呼</div>
20
                <div class="modal-body">
21
22
                    <span>程序猿哥哥,你好,我是你隔壁的老王,嫂子在家吗?</span>
23
                <div class="modal-footer">
24
                    <button type="button" class="btn btn-default" data-dismiss="modal">不在</button>
25
                    <button type="button" class="btn btn-primary"></button>
26
                </div>
27
            </div>
28
        </div>
29
    </div>
30
    </div>
31
</body>
32
</html>
33
34
<script type="text/javascript">
35
36
    $(function(){
37
38
        $(".show-modal").click(function(){
39
            $('#wangModal').modal({});
40
/*            $('#wangModal').modal('toggle');
41
            $('#wangModal').modal('show');
42
            $('#wangModal').modal('hide');*/
43
        });
44
45
        $('#wangModal').on('show.bs.modal',function(e){
46
            alert("你确定要看吗?")
47
        });
48
49
        $('#wangModal').on('shown.bs.modal',function(e){
50
            alert("好吧给你看,你可别打我!")
51
        });
52
53
        $('#wangModal').on('hide.bs.modal',function(e){
54
            alert("不看啦?")
55
        });
56
57
        $('#wangModal').on('hidden.bs.modal',function(e){
58
            alert("好吧没了")
59
        });
60
61
        //从远端获取数据时触发
62
        $('#wangModal').on('loaded.bs.modal',function(e){
63
            console.log("用不上");
64
        });
65
    });  
66
</script>
    好的,bootstrap模态框就学习到这里。
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页