这一小节我们先来讲解一个“模态弹出框”，插件的源文件：modal.js。
右侧代码编辑器（30行）就是单独引入 bootstrap 中发布出的“modal.js”文件。
样式代码：
LESS版本：modals.less
Sass版本：_modals.scss
编译后的Bootstrap：对应bootstrap.css文件第5375行～第5496行
在 Bootstrap 框架中把模态弹出框统一称为 Modal。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框，，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片。如下图所示：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>导入JavaScript插件</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><button class="btn btn-primary" type="button">点击我</button><div class="modal" id="mymodal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h4 class="modal-title">模态弹出窗标题</h4></div><div class="modal-body"><p>模态弹出窗主体内容</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存</button></div></div><!– /.modal-content –></div><!– /.modal-dialog –></div><!– /.modal –><script src=""></script><script src=""></script><script src=""></script><script> $(function(){$(".btn").click(function(){$("#mymodal").modal("toggle");}); });</script></body></html>
Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：
弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮
弹出框主体，一般使用“modal-body”表示，弹出框的主要内容
弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮
如下图所示：
模态弹出窗的结构如下：
<div class="modal show"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h4 class="modal-title">模态弹出窗标题</h4></div><div class="modal-body"><p>模态弹出窗主体内容</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存</button></div></div><!– /.modal-content –></div><!– /.modal-dialog –></div><!– /.modal –>
弹出窗的主体样式实现：
但是对于一个模态弹出窗而言，modal-content才是样式的关键。其主要设置了弹出窗的边框、边距、背景色和阴影等样式。
/*bootstrap.css文件第5412行～第5423行*/.modal-content { position: relative; background-color: #fff; -webkit-background-clip: padding-box;background-clip: padding-box; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; outline: 0; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);box-shadow: 0 3px 9px rgba(0, 0, 0, .5);}
除此之外，modal-content中的modal-header、modal-body和modal-footer三个部分样式设置：
/*bootstrap.css文件第5441行～第5461行*/.modal-header { min-height: 16.42857143px; padding: 15px; border-bottom: 1px solid #e5e5e5;}.modal-header .close { margin-top: -2px;}.modal-title { margin: 0; line-height: 1.42857143;}.modal-body { position: relative; padding: 15px;}.modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5;}勇士面前无险路。
