模态弹出框依赖于Bootstrap提供的js文件，可以单独引入modal.js，也可以直接引入bootstrap.js。
模态弹出框的结构
Bootstrap框架中的模态弹出框，使用了“modal”、“modal-dialog”和“modal-content”样式。
“modal-content”中是弹出窗真正的内容，主要包括三个部分：
弹出框头部，使用“modal-header”，主要包括标题和关闭按钮
弹出框主体，使用“modal-body”，弹出框的主要内容
弹出框脚部，使用“modal-footer”，主要放置操作按钮
例如：
<div> <div> <div> <div> <button type="button" data-dismiss="modal"><span aria-hidden="true">×</span><span>Close</span></button> <h4>模态弹出窗标题</h4> </div> <div> <p>模态弹出窗主体</p> </div> <div> <button type="button" data-dismiss="modal">取消</button> <button type="button">确定</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">触发模态弹出窗</button> <div> <div> <div> <!-- 模态弹出窗内容 --> </div> </div> </div>
使用a标签触发
链接元素自带的href属性可以替代data-target属性，例如：
<a data-toggle="modal" href="#mymodal" >触发模态弹出窗</a> <div > <div > <div > <!-- 模态弹出窗内容 --> </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代码式触发模态弹出框
例如：