bootstrap模态框遮挡原来的元素导致的bug

 

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

发布了5 篇原创文章 · 获赞 0 · 访问量 504
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览