• 111847

    文章

  • 803

    评论

  • 12

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

弹窗滑动,内层不滑动

撸了今年阿里、腾讯和美团的面试,我有一个重要发现.......>>
html, body {  
    height: 100%;  
}  
body{  
    position: relative;  
}  
/*遮罩层显示时body的样式*/  
.notScroll {  
    overflow: hidden;  
}  
/*遮罩层*/  
.window_mask {  
    position: fixed;  
    top: 0 !important;  
}  
/*弹窗*/  
.window_boundingBox {  
    position: fixed !important;  
    top: 50% !important;  
    margin-top: -214px !important;  
    z-index: 1001;  
    width: 90%;  
    left: 5%;  
    background-color: rgb(232, 232, 232);  
    border-radius: 3px;  
    overflow: hidden;  
}  
/*弹窗中需要滚动的部分*/  
.window_boundingBox .window_body {  
    overflow: auto;  
    webkit-overflow-scrolling: touch;  
    line-height: 28px;  
    font-size: 16px;  
    padding: 5px 10px;  
    height: 242px;  
    overflow-y: auto;  
    -webkit-overflow-scrolling: touch;  
}  
// 遮罩出来后让body不可滚动  
$('body,html').addClass('notScroll');  
  
//----------------------------  
  
// 遮罩去掉之后body 可滚动  
$('body,html').removeClass('notScroll'); 


 转载至链接:https://my.oschina.net/shuaihong/blog/1829030


695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客