您的位置：首页 > Web前端 > BootStrap

Bootstrap插件（一）——模态框（modal.js）

2017-09-07 21:59 567 查看
前言：这一片文章我们将对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模态框就学习到这里。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                bootstrap
                                                插件
                                                data属性
                                                show.bs.modal
                                                modal
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航