首页
所有分类
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 相关文章推荐
Js从头学起（基本数据类型和引用类型的参数传递详细分析）
Feb 16 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
javascript学习笔记（一）基础知识
Sep 30 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
JavaScript 巧学巧用
May 23 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
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
感言(394) 方案(1080) 检讨书(456) 接收函(23) 事迹材料(636) 证明书(326) 辞职信(98) 教学反思(909) 答谢词(97) 广播稿(323)
You might like
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
PHP判断网络文件是否存在的方法
2015/03/12 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
javascript删除字符串最后一个字符
2014/01/14 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
Python实现最大子序和的方法示例
2019/07/05 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
美国知名的隐形眼镜电商：Contacts America
2019/11/19 全球购物
Java多态性的定义以及类型
2014/09/16 面试题
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
银行内勤岗位职责
2014/04/09 职场文书
审计专业自荐信范文
2014/04/21 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
教师继续教育反思周记
2015/06/25 职场文书
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android