Bootstrap源码解读模态弹出框（11）

模态弹出框依赖于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">×</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水平居中。实现源码如下：