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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
js验证表单大全
Nov 25 Javascript
jQuery chili图片远处放大插件
Nov 30 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 Javascript
让Vue响应Map或Set的变化操作
Nov 11 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_MySQL教程-第一天
2007/03/18 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
PHP写日志的实现方法
2014/11/05 PHP
php实现两个数组相加的方法
2015/02/17 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
Python set常用操作函数集锦
2017/11/15 Python
Python自定义线程池实现方法分析
2018/02/07 Python
解决DataFrame排序sort的问题
2018/06/07 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
python线程信号量semaphore使用解析
2019/11/30 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
学习Python需要哪些工具
2020/09/04 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
创业计划书的主要内容有哪些
2014/01/29 职场文书
运动会入场式解说词
2014/02/18 职场文书
教师年度考核评语
2014/04/28 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
小学班级口号大全
2015/12/25 职场文书