bootstrap模态框的详细用法
模态框（modal）是什么？
模态框（Modal）是覆盖在父窗体上的子窗体,是一个经常使用的组件。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动，一般用于提示信息，确认信息，表单,登录，注册等内容。模态框弹出时其他页面元素不可被选中。
使用模态框（modal)的准备工作
要使用模态框，你需要引入相应的文件，也就是”bootstrap.css“以及“bootstrap.js”，具体的引入你可以参考Bootstrap官网的起步页面，在这里我就不赘诉了，这边只说几点需要注意的事项。
1.不要将两份文件全部引入，bootstrap.js和bootstrap.min.js同样是包含了所有插件。区别是：一个没有压缩，一个进行了压缩。
2.
bootstrap所有插件都依赖jQuery（也就是说，在引用bootstrap.js前必须先引用jQuery）。
3.插件可以单个引入（使用Bootstrap提供的单个
*.js文件），也就是说你可以单独引用modal.js这个文件，但是某些插件和CSS组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。请注意以下的观点属于个人观点：在使用Bootstrap的时候还是有可能用到它的其它功能比如Carousel比如Collaps又比如导航条，所以如果不是有特别要求，我个人建议直接引用bootstrap.js或bootstrap.min.js就可以了，不需要进行单独引用，这种行为个人认为大部分情况下吃力不讨好。
模态框（modal)的基本使用
案例
以下模态框包含了模态框的头、体和一组放置于底部的按钮。
创建模态框（Modal）
<a data-toggle="modal" href="#myModal">演示模态框a>
在运行程序后，
模态框不会立马显示出来。原因很简单，因为模态框一开始的属性就是显示隐藏的，很明显，就模态
框的作用而言，这是符合他所扮演的功能的
。
当你拷贝粘贴了上述代码以后，你已经得到一个可以使用的模态框了（前提是你已经完成了之前的准备工作），那么接下
来我们来讲解一下上述的代码。
首先我先排除两个不需要详细说明的属性，那就是
aria-hidden和role，之所以不要说明是
因为这两个属性是为了盲人
设计的，
也就说在眼睛
看的见的情况下基本没有用处，如果有需要为盲人做阅读器的朋友可以多研究研究，当然写上这两个属性，一般来说
对我们也感觉不到太大影响。那么下面开始正式说明。
打开模态窗口，您需要有某种触发器。您可以使用按钮或链接。这边我两种都提供了
<a data-toggle="modal" href="#myModal">演示模态框a>。实际上这两种方法都是通过
data 属性完成的：在控制器
元素（比如按钮或者链接）上设置属性
data-toggle="modal"
，同时设置
data-target="#identifier"
或
href="#identifier"
来指定要切换的特定的模态框（带有 id="identifier"）。一般而言使用这种方法已经可以完成工作中
的大部分需求，当一些更灵活的需求出现的时候通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来
调用带
有 id="identifier" 的模态框，基本代码如下，后面将在详细说明。
$('#identifier').modal(options)
然后为每个模态
框创建不同
的触发器。
你不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行
加载。
关闭模态窗口，只需要给模态框内的button添加data-dismiss="modal"属性即可，同样的也可以通过JavaScript来操作，
这里特别说明
class="close"只是为内容添加了样式，并不起到任何控制模态框的作用。
class="modal-body"，class="modal-header"，class="modal-footer"是模态框中的主体，头部，尾部的相应样式。
我个人认为其实他们的作用一点都不重要，实际的
开发当中，你完全可以根据你的需要写你自己的样式。
在基本使用这一快内容中，我在补充一点，在通常的使用当中，当你点击屏幕灰色背景的时候，模态框是会关闭的，
如果你不希望这种情况出现，那么你可以在模态框的最外围代码当中添加一条属性
：data-backdrop
="static"。
当你已经看到这边的时候，恭喜你，你已经可以使用模态框这一功能了，并且能应对大部分的使用情况。
模态框（modal)的更多使用
1.如果你希望，当你按下ESC键时关闭，那么在模态框最外层加上tabindex="-1"这一属性。
2.在JS中控制模态框打开关闭的方法是：
手动切换模态框
$('#identifier').modal('toggle')$('#identifier').modal('show')
手动隐藏模态框
$('#identifier').modal('hide')
3.class="fade"弹出时的动画效果（淡入淡出效果）。如果你不需要删掉就可以了。
4.模态框可以使用一些事件，下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。但是我个人认为
并不实用，各位想看就看不想看，
我觉得也没有什么损失。
| 事件类型 | 描述 |
|---|---|
| show.bs.modal | show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。 |
| shown.bs.modal | 此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。 |
| hide.bs.modal | hide 方法调用之后立即触发该事件。 |
| hidden.bs.modal | 此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。 |
| loaded.bs.modal | 从远端的数据源加载完数据之后触发该事件。 |