模态框这个名字有点高雅了，其实就是对话框，用来弹出一个新的界面。
模态框的使用非常的场景，例如在用户管理页面，当进行用户新增时，可以点击新增按钮，弹出一个窗体供填入用户信息然后保存。
注意Bootstrap的模态框一次只能显示一个，不能在打开一个模态框后尝试继续打开第二个。
2. 模态框样式模态框相关的样式类比较多，我个人是感觉有些过于复杂了，当然这里也不排除Bootstrap开发人员有意为之，毕竟复杂之后拓展时就更加容易。
我们直接来看一个示例：
需要注意的是，大多数情况下，我们只需要调整标题、内容和尾部的按钮即可。
另外模态框默认是不显示的，需要触发后显示。
3. 按钮直接关联模态框可以将按钮设置为点击后切换模态框状态，代码如下：
当点击按钮后，就会打开id为myModal的模态框，效果如下：
此时点击标题右上角的x，或者点击关闭按钮即可关闭当前模态框。
通过按钮打开模态框的方式比较死板，因为大多数情况下，我们在打开模态框之前需要进行条件判断/数据加载相关工作。
此时我们可以通过JS方法控制模态框，常用的方法有3个。
- $('#myModal').modal('show')：打开模态框
- $('#myModal').modal('hide')：关闭模态框
- $('#myModal').modal('toggle')：切换模态框的状态
假设我们通过按钮打开模态框则代码如下：
点击按钮后即可打开模态框。
5. 调整大小可以为modal-dialog类修饰的元素追加modal-lg或modal-sm类，将显示大号的或者小号的模态框，根据具体显示的内容调整即可。
6. 动画效果在某些较低性能的设备，或者某些浏览器上，弹出模态框时的动画效果会导致页面卡顿，用户体验较差。
但是大部分设备，增加动画效果后，会更加的高端大气上档次。
可以为.modal修饰的元素添加.fade类，这样模态框弹出时会自带动画效果。
7. 小结模态框使用非常常见，Bootstrap模态框样式还是比较大气的，模态框的body部分可以放置各种各样的内容。
另外对于Bootstrap模态框的动画效果，我个人建议慎用，毕竟还是要先追求稳定。
