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属性