整理关于Bootstrap模态弹出框的慕课笔记


Posted in Javascript onMarch 29, 2017

整理自慕课笔记

插件的源文件:modal.js。

在 Bootstrap 框架中把模态弹出框统一称为 Modal。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作,也有可能弹出的是一张图片。如下图所示:

整理关于Bootstrap模态弹出框的慕课笔记

<body>
<button class="btn btn-primary" type="button">点击我</button>
<div class="modal" id="mymodal">
 <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><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>
<script>
 $(function(){
 $(".btn").click(function(){
  $("#mymodal").modal("toggle");
 });
 });
</script>
</body>

结构分析

Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分:
1. 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮
2. 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容
3. 弹出框脚部,一般使用“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><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

实现原理

bootstrap中的“模态弹出框”有以下几个特点:
1、模态弹出窗是固定在浏览器中的。
2、在全屏状态下,模态弹出窗宽度是自适应的,而且modal-dialog水平居中。
3、当浏览器视窗大于768px时,模态弹出窗的宽度为600px。

两种尺寸选择

除此之外,Bootstrap框架还为模态弹出窗提供了不同尺寸,一个是大尺寸样式“modal-lg”,另一个是小尺寸样式“modal-sm”。其结构上稍做调整:

<divclass="modal-dialog modal-lg">

触发方法

众所周知,模态弹出窗在页面加载完成时,是被隐藏在页面中的,只有通过一定的动作(事件)才能触发模态弹出窗的显示。在Bootstrap框架中实现方法有2种,接下来分别来介绍这2种触发模态弹出窗的使用方法。

声明式触发方法

方法一

模态弹出窗声明,只需要自定义两个必要的属性:data-toggle和data-target(bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle=”” 或者 data-dismiss=”“)。例如:

<!-- 触发模态弹出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button>
<!-- 模态弹出窗 -->
<div class="modal fade" id="mymodal">
 <div class="modal-dialog">
  <div class="modal-content">
  <!-- 模态弹出窗内容 -->
  </div>
 </div>
</div>

注意以下事项:
1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器);
2、data-target可以设置为CSS的选择符,也可以设置为模态弹出窗的ID值,一般情况设置为模态弹出窗的ID值,因为ID值是唯一的值。

方法二

触发模态弹出窗也可以是一个链接元素,那么可以使用链接元素自带的href属性替代data-target属性,如:

<!-- 触发模态弹出窗的元素 -->
<a data-toggle="modal" href="#mymodal" rel="external nofollow" class=" btn btn-primary" >点击我会弹出模态弹出窗</a>
<!-- 模态弹出窗 -->
<div class="modal fade" id="mymodal" >
 <div class="modal-dialog" >
  <div class="modal-content" >
  <!-- 模态弹出窗内容 -->
  </div>
 </div>
</div>

不过建议还是使用统一使用data-target的方式来触发。

增加过度动画

为模态弹出框增加过度动画效果:
可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。

<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">
小的模态弹出窗
</button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-sm">
  <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>

模态弹出窗的使用(data-参数说明)

除了通过data-toggle和data-target来控制模态弹出窗之外,Bootstrap框架针对模态弹出框还提供了其他自定义data-属性,来控制模态弹出窗。比如说:是否有灰色背景modal-backdrop,是否可以按ESC键关闭模态弹出窗。有关于Modal弹出窗自定义属性相关说明如下所示:

整理关于Bootstrap模态弹出框的慕课笔记

使用(JavaScript触发)

除了使用自定义属性触发模态弹出框之外,还可以通过JavaScript方法来触发模态弹出窗。通过给一个元素一个事件,来触发。比如说给一个按钮一个单击事件,然后触发模态弹出窗。如下面的一个简单示例:

<!-- 触发模态弹出窗元素 -->
<button class="btn btn-primary" type="button">点击我</button>
<!-- 模态弹出窗内容 -->
<div class="modal" id="mymodal">
 <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><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JavaScript触发的弹出窗代码:

$(function(){
 $(".btn").click(function(){
 $("#mymodal").modal();
 });
});

设置参数

使用JavaScript触发模态弹出窗时,Bootstrap框架提供了一些设置,主要包括属性设置、参数设置和事件设置。

属性设置

模态弹出窗默认支持的自定义属性主要有:

整理关于Bootstrap模态弹出框的慕课笔记

比如你不想让用户按ESC键关闭模态弹出窗,你就可以这样做:

$(function(){
 $(".btn").click(function(){
  $("#mymodal").modal({
   keyboard:false
  });
 });
});

参数设置

在Bootstrap框架中还为模态弹出窗提供了三种参数设置,具体说明如下:

整理关于Bootstrap模态弹出框的慕课笔记

事件设置

模态弹出窗还支持四种类型的事件,分别是模态弹出窗的弹出前、弹出后,关闭前、关闭后,具体描述如下:

整理关于Bootstrap模态弹出框的慕课笔记

调用方法也非常简单:

$('#myModal').on('hidden.bs.modal', function (e) {
 // 处理代码...
})

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

Javascript 相关文章推荐
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
利用JavaScript写一个简单计算器
Nov 27 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 #Javascript
jQuery插件之validation插件
Mar 29 #jQuery
Vue.js实现移动端短信验证码功能
Mar 29 #Javascript
Angular2入门--架构总览
Mar 29 #Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 #Javascript
AngularJS中$http的交互问题
Mar 29 #Javascript
Angular2开发——组件规划篇
Mar 28 #Javascript
You might like
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Python实现微信好友的数据分析
2019/12/16 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
平面设计岗位职责
2013/12/14 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
Java输出Hello World完美过程解析
2021/06/13 Java/Android