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">&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();

});

});

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

以上是 Bootstrap源码解读模态弹出框(11) 的全部内容, 来源链接: utcz.com/z/325118.html

回到顶部