标签：isp pos 一起 rgba position rgb 删掉 ack mask
遇到了一个问题，是点击链接出现弹框，弹框里面的内容是可以滑动的，结果我滑动的时候发现下面的body也跟着一起滑动，先看一下代码。
弹框的 HTML：
<div class="mask"> <div class="reserve"> <span class="close">X</span> <div class="title">title</div> <div class="content"> //很多内容 </div> </div> </div>
弹框的 CSS ：
.mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 990; background: rgba(0, 0, 0, .7); } .reserve { position: relative; width: 90%; height: 80%; z-index: 999; overflow: auto; border-radius: 10px; margin: 100px auto; background-color: #fff; }
这样写确实没问题，但是问题也跟着来了，滑动内容的时候body也会跟着滑动，下面是解决办法。
给 html 和 body 都加上
.ban_body { height: 100%; overflow: hidden; }
我是这样解决的 ：当点击按钮的时候为 html 和 body 加上 .ban_body ，这样body就不跟着一起滑动了。
$(document).on("click",".btn", function () { $("html,body").addClass("ban_body") $(".mask").show(100); })
关闭的时候别忘删掉哦。
标签：isp pos 一起 rgba position rgb 删掉 ack mask
原文地址：http://www.cnblogs.com/bfc0517/p/7810703.html
