bootstrap自带的模态框，可以实现点击弹窗，里面是自己写的html，使用方式是在html文件里加入以下代码
- 在相应的div里面写自己的代码
- 使用前要先引用jquery
<!--第1层：模态框的声明-->
<div class="modal fade">
<!--第2层：窗口的声明-->
<div class="modal-dialog">
<!--第3层：内容的声明-->
<div class="modal-content">
<!--内容声明的标题-->
<div class="modal-header">
</div>
<!--内容声明的body-->
<div class="modal-body">
</div>
<!--内容声明的footer-->
<div class="modal-footer">
</div>
</div>
</div>
</div>然后只要在js文件里使用以下代码控制模态框的显示和隐藏（默认是隐藏状态）
$(".modal").modal('hide');//隐藏
$(".modal").modal('show');//显示使用方法比较简单，但是我在做项目中遇到的问题就是使用了模态框之后，原本应该可以点击的select，input元素出现部分无法点击，或者很难才能点中的情况，如果不是全屏显示的话，这些控件基本都点不了。
由于我使用了bootstrap的container-fluid流式布局,我以为是布局写的时候存在bug，经过多次检查却没有发现问题，最后发现是模态框把原来的元素遮挡了。
我们可以看看这张图的右边，content是整个页面的内容，modal是模态框，这个时候虽然模态框是默认隐藏状态，但其实它占用了实际的位置，也就是说，这时候我们想去点击选择框，会被模态框给挡住了！
我们需要知道css中，有一种隐藏是肉眼不可见，但是实际却占用了位置，例如设置opacity（透明度）为0或者visibility为hidden；还有一种隐藏是不仅不可见，连盒子模型都不会生成，这种隐藏完全不会对实际的布局产生任何影响，这就是display:none;
很明显，模态框默认就不是用display:none；这种方法，我们需要自己给它设置这个属性，然后在js代码里需要显示的时候，使用多一行代码：
//jquery自带的show()方法就是把元素的display:none；属性去掉，同理hide()方法就是给元素加上display:none;属性
$(".modal").show();
$(".modal").modal('show');//显示加了这个属性之后，这个bug就解决了。
总结：
1、使用框架带有的插件，一定要熟悉它的一些原理，不了解工作方式直接使用就会带来潜在的bug
2、隐藏元素为了不隐藏原有的布局，最好使用display:none，jquery自带的hide()方法实现原理就是设置display属性
