美文网首页
禁止弹窗蒙版底部滚动

禁止弹窗蒙版底部滚动

作者: 奋斗的小小小兔子 | 来源:发表于2018-09-16 20:13 被阅读18次
  1. 打开弹窗时,给body添加class,body-fixed

.body-fixed {
  position: fixed;
  width: 100%;
}

弹窗打开时给body添加类body-fixed

这种方法有个弊端,假设在页面滑到底部,打开弹窗,背景会定位到顶部。

  1. 使用flex
<html>
<style>
html,
body {
   width: 100%;
   height: 100%;
}   
.container {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
}
.main {
   flex: 1;
   overflow: scroll;
}
.modal {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background:rgba(0,0,0,0.5);
   display: flex;
   justify-content: center;
   align-items: center;
}
</style>
<body>
     <div class="container">
         <div class="main">.....页面主要内容...</div>
         <div class="modal">弹框内容</div>
     </div>
</body>
</html>

这种方法也有个弊端:由于使用了overflow,导致在移动端时,页面会异常卡顿。

  1. 打开弹窗时,给body添加modal-open
.modal-open {
  overflow-y: hidden;
}

另,react给body加class

openModal = (event) => {
  document.body.classList.add('modal-open');
  this.setState({ showModal: true });
}
hideModal = (event) => {
  document.body.classList.remove('modal-open');
  this.setState({ showModal: false });
}

参考资料

相关文章

网友评论

      本文标题:禁止弹窗蒙版底部滚动

      本文链接:https://www.haomeiwen.com/subject/ctbfnftx.html