前言：这一片文章我们将对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="87771" 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">@</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就配置了这些基本的属性，那作用是啥呢？看下面的总结表。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模态框就学习到这里。
