整理关于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中增加参数与Json转换代码
Nov 20 Javascript
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 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
用户的详细注册和判断
2006/10/09 PHP
php动态生成JavaScript代码
2009/03/09 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
js 走马灯简单实例
2013/11/21 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
python实现自动重启本程序的方法
2015/07/09 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
《白鹅》教学反思
2014/04/13 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
小学新教师个人总结
2015/02/05 职场文书
求职推荐信范文
2015/03/27 职场文书
董事长新年致辞
2015/07/29 职场文书
Django如何与Ajax交互
2021/04/29 Python
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python