1、打开WebStorm开发工具，新建‘test.html’文件，并在文件同级目录安装部署Bootstrap相关文件，目录结构如下图
2、在‘test.html’中写如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container" >
<button class="btn btn-primary">
模态框
</button>
<div class="modal" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
弹框的标题
</div>
<div class="modal-content">
弹框的主体
</div>
</div>
</div>
</div>
</div>
</body>
</html>
模态框的结构就是上面所写，div的层次比较多
3、网页查看效果如下图，这时点击按钮还没有相应，因为没有对应的代码
4、修改‘test.html’代码如下:
<div class="container" >
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">
模态框
</button>
<div class="modal" id="mymodal" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
弹框的标题
</div>
<div class="modal-content">
弹框的主体
</div>
</div>
</div>
</div>
</div>
5、网页查看效果，点击按钮，可以正常弹出模态框，点击网页其他位置模态框消失
6、在模态框上增加取消按钮，点击取消后模态框消失，代码如下：
<div class="container" >
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">
模态框
</button>
<div class="modal" id="mymodal" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
弹框的标题
</div>
<div class="modal-content">
弹框的主体
</div>
<div class="modal-footer">
<button class="btn btn primary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</div>
7、网页查看效果，点击按钮，可以正常弹出模态框，点击模态框取消按钮模态框消失
