在一些网站建设应用中，我们或许会使用到点击一个按钮然后弹出一个对话框的交互功能，在Bootstrap中同样提供了这样的交互功能，不过在这里它被称之为模态框（Modal）。
如果你刚好需要在自己的项目中使用到该功能，那么不妨跟随着我们这篇文章一起来学习一下如何使用Bootstrap模态框吧。
Bootstrap模态框的引入方式
在使用Bootstrap模态框之前，我们需要在项目中引入bootstrap.js或者bootstrap.min.js，这是使用模态框的必要条件。
Bootstrap模态框的主要结构
模态框由框头、框体和框底组成，这是Bootstrap默认的样式，当然你也可以根据自己的需求对其进行自定义，不过默认样式已经满足大多数需求了，让我们看看默认样式如何编写：<div class="modal fade"> <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">佚站互联</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模态框的动态演示
通过上一步我们构建了基础的Bootstrap模态框，在这一步我们需要通过点击一个按钮处罚一个模态框，让我们看看应该如何编写：<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">点击显示模态框</button> <!-- 模态框 --> <div class="modal fade" id="myModal" tabindex="-1" 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">佚站互联</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-dialog --> </div><!-- /.modal -->需要注意的是，我们要在触发模态框按钮这里写入data-target属性对应想要显示的模态框，还需要加入data-toggle="modal"属性从而触发js交互。
Bootstrap模态框需要注意的地方
模态框不支持嵌套功能，所以千万不要在一个模态框中嵌套另外一个模态框。
当然你可以同时使用多个模态框，然后通过不同的按钮对它们进行控制。
通过data-toggle="modal"实现模态框绑定是最为简单的方式，只需要在对应的按钮中写入对应的模态框信息即可。
写在文章最后
Bootstrap模态框使用起来非常简单方便，所以如果你想要在自己的项目引入这个功能，那么就赶快试试吧。