1. 概述

模态框这个名字有点高雅了，其实就是对话框，用来弹出一个新的界面。

模态框的使用非常的场景，例如在用户管理页面，当进行用户新增时，可以点击新增按钮，弹出一个窗体供填入用户信息然后保存。

注意Bootstrap的模态框一次只能显示一个，不能在打开一个模态框后尝试继续打开第二个。

2. 模态框样式

模态框相关的样式类比较多，我个人是感觉有些过于复杂了，当然这里也不排除Bootstrap开发人员有意为之，毕竟复杂之后拓展时就更加容易。

我们直接来看一个示例：

             <!-- 模态框 --><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"aria-hidden="true">&times;</button><h4 class="modal-title">标题</h4></div><!-- 身体 --><div class="modal-body">内容</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>

需要注意的是，大多数情况下，我们只需要调整标题、内容和尾部的按钮即可。

另外模态框默认是不显示的，需要触发后显示。

3. 按钮直接关联模态框

可以将按钮设置为点击后切换模态框状态，代码如下：

                 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button>

当点击按钮后，就会打开id为myModal的模态框，效果如下：

此时点击标题右上角的x，或者点击关闭按钮即可关闭当前模态框。

4. 通过JS方法打开/关闭模态框

通过按钮打开模态框的方式比较死板，因为大多数情况下，我们在打开模态框之前需要进行条件判断/数据加载相关工作。

此时我们可以通过JS方法控制模态框，常用的方法有3个。

$('#myModal').modal('show')：打开模态框
$('#myModal').modal('hide')：关闭模态框
$('#myModal').modal('toggle')：切换模态框的状态

假设我们通过按钮打开模态框则代码如下：

                 <button type="button" class="btn btn-primary" onclick="btnOpenModal()">JS打开模态框</button><script>function btnOpenModal() {$('#myModal').modal('toggle');}</script>

点击按钮后即可打开模态框。

5. 调整大小

可以为modal-dialog类修饰的元素追加modal-lg或modal-sm类，将显示大号的或者小号的模态框，根据具体显示的内容调整即可。

6. 动画效果

在某些较低性能的设备，或者某些浏览器上，弹出模态框时的动画效果会导致页面卡顿，用户体验较差。

但是大部分设备，增加动画效果后，会更加的高端大气上档次。

可以为.modal修饰的元素添加.fade类，这样模态框弹出时会自带动画效果。

7. 小结

模态框使用非常常见，Bootstrap模态框样式还是比较大气的，模态框的body部分可以放置各种各样的内容。

另外对于Bootstrap模态框的动画效果，我个人建议慎用，毕竟还是要先追求稳定。

零基础Bootstrap入门教程(16)--模态框相关推荐

零基础Bootstrap入门教程(0)--教程背景与目录
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 教程目录 3. 源码下载 1. 背景在学习完成HTML/CSS/JS/jQuery零基础入门教程后,自然而然我们要进入Bootstra ...
零基础Bootstrap入门教程(9)--使用表单控件
点此查看所有教程.项目.源码导航本文目录 1. 概述 2. 基本输入控件 3. 调整表单控件的大小 4. 表单控件的特殊用法 4.1 单选框用法 4.2 复选框用法 5. 小结 1. 概述表单控 ...
零基础Bootstrap入门教程(26)–轮播的实现
点此查看所有教程.项目.源码导航本文目录 1. 概述 2. 基本轮播 3. 添加轮播指示器 4. 添加轮播控件 5. 小结 1. 概述要想从头到尾来实现一个比较好看且稳定的轮播控件,还是有一定难 ...
零基础Bootstrap入门教程(4)--开发标准的响应式网页
点此查看所有教程.项目.源码导航本文目录 1. 背景 2. 创建标准HTML5页面 3. 添加响应式内容 4. 小结 1. 背景响应式网页指的是可以在不同尺寸/分辨率设备下都可以运行良好的网页, ...
零基础Bootstrap入门教程(25)--折叠面板、折叠面板导航
点此查看所有教程.项目.源码导航本文目录 1. 概述 2. 折叠面板 3. 折叠面板导航 4. 小结 1. 概述上一篇我们讲述了折叠插件的用法,可以将任意的div元素包含的内容进行动态的折叠/显 ...
零基础CSS入门教程(16)–内边距
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 默认情况 3. 设置内边距 4. 简写属性 5. 小结 1. 前言上一篇介绍了外边距,也就是元素跟相邻元素的距离. 本篇来介绍内边距, ...
零基础SSM入门教程(0)--教程背景与目录
点此查看零基础JavaWeb全栈文章目录及源码下载 1. 背景本教程的出发点是写一个比较条理,比较全面的SSM系列教程,首先造福自己.理顺自己的知识体系,然后也造福大众,因为网上现存的资源相对比较 ...
零基础CSS入门教程(1)–初识CSS
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. HTML与CSS区别 3. CSS有哪些功能 4. 如何学习CSS 1. 前言学习CSS是离不开HTML的,HTML是CSS的基础,如 ...
零基础JavaScript入门教程(1)–走进JavaScript的世界
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. JS的历史 3. JS的地位 4. JS与HTML.CSS的区别 5. JS是真正的编程语言 6. JS的组成部分 7. 小结 1. 前 ...

零基础Bootstrap入门教程(16)--模态框

本文目录