Bootstrap源码解读模态弹出框(11)


Posted in Javascript onDecember 28, 2016

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

.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基础教程 专题中,欢迎点击学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 #Javascript
JS简单实现移动端日历功能示例
Dec 28 #Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 #Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 #Javascript
javascript实现简单的ajax封装示例
Dec 28 #Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 #Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 #Javascript
You might like
做个自己站内搜索引擎
2006/10/09 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
php GUID生成函数和类
2014/03/10 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
php和asp语法上的区别总结
2019/05/12 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
JS常用知识点整理
2017/01/21 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
python实现读取命令行参数的方法
2015/05/22 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
django中的setting最佳配置小结
2017/11/21 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
python实现tail -f 功能
2020/01/17 Python
介绍一下Java中的Class类
2015/04/10 面试题
材料采购员岗位职责
2013/12/17 职场文书
公证委托书大全
2014/04/04 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
抗洪救灾标语
2014/10/08 职场文书
售房协议书范本2014
2014/10/23 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis
python使用torch随机初始化参数
2022/03/22 Python