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)的基本使用

案例

以下模态框包含了模态框的头、体和一组放置于底部的按钮。

1. <h2>创建模态框（Modal）</h2>

2. <!-- 按钮触发模态框 -->

3. <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 演示模态框</button>

<a data-toggle="modal" href="#myModal">演示模态框</a>

<!-- 模态框（Modal） --> <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</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><!-- /.modal-content --> </div><!-- /.modal --> </div>

在运行程序后，模态框不会立马显示出来。原因很简单，因为模态框一开始的属性就是显示隐藏的，很明显，就模态

框的作用而言，这是符合他所扮演的功能的。

 

当你拷贝粘贴了上述代码以后，你已经得到一个可以使用的模态框了（前提是你已经完成了之前的准备工作），那么接下

来我们来讲解一下上述的代码。首先我先排除两个不需要详细说明的属性，那就是aria-hidden和role，之所以不要说明是

因为这两个属性是为了盲人设计的，也就说在眼睛

看的见的情况下基本没有用处，如果有需要为盲人做阅读器的朋友可以多研究研究，当然写上这两个属性，一般来说

对我们也感觉不到太大影响。那么下面开始正式说明。

 

 

打开模态窗口，您需要有某种触发器。您可以使用按钮或链接。这边我两种都提供了[html] view plain copy

1. <code class="language-html"><span style="font-size:18px;color:#ff0000;background-color:rgb(255,255,255);"><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 演示模态框</button></span></code>  

<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)

data-target="#myModal" （href="#identifier"也一样）是你想要在页面上加载的模态框的目标，你可以在页面上创建多个模态框，

然后为每个模态框创建不同的触发器。你不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行

加载。

 

关闭模态窗口，只需要给模态框内的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	从远端的数据源加载完数据之后触发该事件。