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 相关文章推荐
node.js中的Socket.IO使用实例
Nov 04 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
js简易版购物车功能
Jun 17 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
基于Vue实例对象的数据选项
Aug 09 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 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格式化日期和时间格式化示例分享
2014/02/24 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
AngularJS语法详解
2015/01/23 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
npm qs模块使用详解
2020/02/07 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
python根据路径导入模块的方法
2014/09/30 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
对Django外键关系的描述
2019/07/26 Python
python 伯努利分布详解
2020/02/25 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
大学毕业生自我鉴定
2013/11/05 职场文书
入党培养人考察意见
2015/06/08 职场文书
师范生小学见习总结
2015/06/23 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python
vue中data里面的数据相互使用方式
2022/06/05 Vue.js