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

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

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

模态弹出框的结构

Bootstrap框架中的模态弹出框，使用了“modal”、“modal-dialog”和“modal-content”样式。

“modal-content”中是弹出窗真正的内容，主要包括三个部分：

弹出框头部，使用“modal-header”，主要包括标题和关闭按钮

弹出框主体，使用“modal-body”，弹出框的主要内容

弹出框脚部，使用“modal-footer”，主要放置操作按钮

例如：

×

class="sr-only">Close

class="sr-only">Close

模态弹出窗主体

取消

确定

模态弹出窗样式的关键是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-heigMMauMzquzSht: 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值。例如：

触发模态弹出窗

使用a标签触发

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

触发模态弹出窗

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

给“.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代码式触发模态弹出框

例如：

触发模态弹出窗

然后添加javascript代码：

$(function(){

$("#mybtn").click(function(){

$("#mymodal").modal();

});

});

本文系列教程整理到：Bootstrap基础教程 专题中，欢迎点击学习。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。