首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

整理关于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) {
 // 处理代码...
})

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

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

- Author -

大大大大大桃子

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
深入理解js中this的用法
May 28 Javascript
JSON在Javascript中的使用（eval和JSON.parse的区别）详细解析
Sep 05 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
vue项目中导入swiper插件的方法
Jan 30 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
js实现碰撞检测
Jan 29 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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
智利购物网站(5) 巴基斯坦购物网站(2) 匈牙利购物网站(11) 越南购物网站(9) 新西兰购物网站(42) 捷克购物网站(26) 北美洲购物网站(1) 卡塔尔购物网站(3) 菲律宾购物网站(13) 秘鲁购物网站(1)
You might like
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
jQuery选择器源码解读（三）：tokenize方法
2015/03/31 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
Javascript缓存API
2016/06/14 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
Python程序设计入门(1)基本语法简介
2014/06/13 Python
浅析Python基础-流程控制
2016/03/18 Python
Python Requests 基础入门
2016/04/07 Python
git进行版本控制心得详谈
2017/12/10 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
同步和异步有何异同，在什么情况下分别使用他们？举例说明
2014/02/27 面试题
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
演讲稿开场白
2014/01/13 职场文书
保证书范文大全
2014/04/28 职场文书
设计师求职信模板
2014/05/06 职场文书
小爸爸观后感
2015/06/15 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python