Bootstrap源码解读（第十一弹：模态弹出框）

模态弹出框依赖于Bootstrap提供的js文件，可以单独引入modal.js，也可以直接引入bootstrap.js。

模态弹出框的结构

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">&times;</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>    </div></div>

模态弹出窗样式的关键是modal-content。modal-content主要设置了弹出窗的边框、边距、背景色和阴影，实现源码如下：

.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，主要是控制一些间距的样式。modal-footer一般是用来放置按钮，所以底部还对包含的按钮做了一定的样式处理。实现源码如下：

.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;}.modal-footer .btn + .btn {  margin-bottom: 0;  margin-left: 5px;}.modal-footer .btn-group .btn + .btn {  margin-left: -1px;}.modal-footer .btn-block + .btn-block {  margin-left: 0;}

模态弹出框的实现原理

模态弹出窗是固定在浏览器中的
实现源码如下：

.modal {  position: fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  z-index: 1040;  display: none;  overflow: hidden;  -webkit-overflow-scrolling: touch;  outline: 0;}

在全屏状态下，模态弹出窗宽度是自适应的，而且modal-dialog水平居中。实现源码如下：

.modal-dialog {  position: relative;  width: auto;  margin: 10px;}

当浏览器视窗大于768px时，模态弹出窗的宽度为600px。实现源码如下：

@media (min-width: 768px) {  .modal-dialog {    width: 600px;    margin: 30px auto;  }  .modal-content {    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);  }  .modal-sm {    width: 300px;  }}

模态弹出窗底部有一个透明的黑色蒙层效果，实现源码如下：

.modal-backdrop {  position: fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  background-color: #000;}

它有一个过渡动画，从fade到in，把opacity值从0变成了0.5。实现源码如下：

.modal-backdrop.fade {  filter: alpha(opacity=0);  opacity: 0;}.modal-backdrop.in {  filter: alpha(opacity=50);  opacity: .5;}

声明式触发模态弹出窗

使用button触发

需要使用两个属性：data-toggle和data-target。data-toggle必须设置为modal；data-target一般情况设置为模态弹出窗的ID值。例如：

<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">触发模态弹出窗</button><div class="modal" id="mymodal">    <div class="modal-dialog">        <div class="modal-content">            <!-- 模态弹出窗内容 -->        </div>    </div></div>

使用a标签触发

链接元素自带的href属性可以替代data-target属性，例如：

<a data-toggle="modal" href="#mymodal" class="btn btn-primary" >触发模态弹出窗</a><div class="modal"  id="mymodal" >    <div class="modal-dialog" >        <div class="modal-content" >            <!-- 模态弹出窗内容 -->        </div>    </div></div>

为弹出框增加过度动画效果

给“.modal”增加类名“fade”即可。
实现源码如下：

.modal.fade .modal-dialog {  -webkit-transition: -webkit-transform .3s ease-out;       -o-transition:      -o-transform .3s ease-out;          transition:         transform .3s ease-out;  -webkit-transform: translate(0, -25%);      -ms-transform: translate(0, -25%);       -o-transform: translate(0, -25%);          transform: translate(0, -25%);}.modal.in .modal-dialog {  -webkit-transform: translate(0, 0);      -ms-transform: translate(0, 0);       -o-transform: translate(0, 0);          transform: translate(0, 0);}

JavaScript代码式触发模态弹出框

例如：

<button type="button" class="btn btn-primary" id="mybtn">触发模态弹出窗</button><div class="modal" id="mymodal">    <div class="modal-dialog">        <div class="modal-content">            <!-- 模态弹出窗内容 -->        </div>    </div></div>

然后添加Javascript代码：

$(function(){    $("#mybtn").click(function(){        $("#mymodal").modal();    });});