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 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
微信小程序排坑指南详解
May 23 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 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
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
Python数据类型学习笔记
2016/01/13 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
python实现屏保计时器的示例代码
2018/08/08 Python
浅析python继承与多重继承
2018/09/13 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
仓库班组长岗位职责
2013/12/12 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书