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 相关文章推荐
Javascript 面向对象特性
Dec 28 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
vue使用recorder.js实现录音功能
Nov 22 Javascript
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
一个ftp类(ini.php)
2006/10/09 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
Python编程pygal绘图实例之XY线
2017/12/09 Python
python实现ID3决策树算法
2017/12/20 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
基于Pytorch SSD模型分析
2020/02/18 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
汽修专业学生自我鉴定
2013/11/16 职场文书
临床护士自荐信
2014/01/31 职场文书
优秀幼教自荐信
2014/02/03 职场文书
公司会计岗位职责
2014/02/13 职场文书
保护动物倡议书
2014/04/15 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
2022漫威和DC电影上映作品
2022/04/05 欧美动漫