首页
所有分类
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或css文件后面跟参数的原因说明
Jan 09 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
JS中substring与substr的用法
Nov 16 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
vue 解决异步数据更新问题
Oct 29 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
React forwardRef的使用方法及注意点
Jun 13 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
计划(88) 导游词(322) 开幕词(63) 慰问信(53) 汇报材料(247) 观后感(479) 通知(159) 实用文书(952) 闭幕词(9) 工作总结(1972)
You might like
php中{}大括号是什么意思
2013/12/01 PHP
php中fsockopen用法实例
2015/01/05 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
php实现文件预览功能
2017/05/23 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
锋利的jQuery 要点归纳（三） jQuery中的事件和动画（上：事件篇）
2010/03/24 Javascript
JS与C#编码解码
2013/12/03 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
在Python中使用正则表达式的方法
2015/08/13 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
基于python的列表list和集合set操作
2019/11/24 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
python随机模块random使用方法详解
2020/02/14 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
日常奢侈品，轻松购物：Verishop
2019/08/20 全球购物
澳大利亚女装精品店：Alannah Hill
2020/07/29 全球购物
简述安装Slackware Linux系统的过程
2012/05/08 面试题
信息技术课后反思
2014/04/27 职场文书
2014教师党员自我评议（5篇）
2014/09/20 职场文书
教师工作总结范文2014
2014/11/10 职场文书
反腐倡廉观后感
2015/06/08 职场文书