css 实现弹框滚动条

  <!-- 活动详情弹框 bigin --><div class="z_activity_popup"><div class="z_activity_mask"><p class="z_activity_close"><span class="z_activity_close_span"><img src="https://cdn.xiaobei.beer/event/public/reserve/assets/images/index_06.png" alt=""></span></p><!-- 保持padding --><div class="z_activity_box"><div class="z_activity_body"><h3 class="z_activity_title"><hr class="z_activity_line" /><span>活动详情</span><hr class="z_activity_line" /></h3><div class="z_activity_content"><div class="z_activity_diamond"><img src="https://cdn.xiaobei.beer/event/public/reserve/assets/images/index_07.png" alt=""></div><p class="z_activity_text">本次活动仅限于北京、广州、深圳、厦门、福州、沈阳、武汉等8个城市，每个手机号码仅限申请1台，活动名额有限，抢完即止</p></div><div class="z_activity_content"><div class="z_activity_diamond"><img src="https://cdn.xiaobei.beer/event/public/reserve/assets/images/index_07.png" alt=""></div><p class="z_activity_text">申请预约成功后，用户仅需预存2980元/台，即可获得小呗智饮AI智能净饮一体机1台，其中980元为净水服务预存款，其余的2000元可用于小呗饮品商城消费或净水服务</p></div><div class="z_activity_content"><div class="z_activity_diamond"><img src="https://cdn.xiaobei.beer/event/public/reserve/assets/images/index_07.png" alt=""></div><p class="z_activity_text">首批申请预购成功的用户，可额外再获得500升净水流量、20颗胶囊饮品（随机品类）、大盏门建盏礼品1份</p></div><div class="z_activity_content"><div class="z_activity_diamond"><img src="https://cdn.xiaobei.beer/event/public/reserve/assets/images/index_07.png" alt=""></div><p class="z_activity_text">用户在使用小呗智饮AI智能净饮一体机的净水服务时，需按0.25元/升支付净水服务费用，用户若需购买胶囊饮品可至小呗饮品商城进行选购</p></div><div class="z_activity_content"><div class="z_activity_diamond"><img src="https://cdn.xiaobei.beer/event/public/reserve/assets/images/index_07.png" alt=""></div><p class="z_activity_text">用户在使用期间，除需支付净水服务费用和购买胶囊饮品外，其它服务均不再收取任何费用（包括但不限于设备首次安装调试、设备故障维修、更换新机、滤芯耗材费用等），人为因素造成设备损坏的除外</p></div><div class="z_activity_content"><div class="z_activity_diamond"></div><p class="z_activity_text" style="line-height:.426667rem;">本次活动需提前预约<br>预购成功后分为以下三时个批次按先后顺序发货：<br><span style="margin-top:.666667rem;display: inline-block">9月15日前成功预约的用户，将在10月15日前完成发货;</span><br>9月16日-9月30日成功预约的用户，将在10月30日前完成发货； <br>10月1日-10月31日成功预约的用户，将在11月15日前完成发货。</p></div><!-- 弹框图片 --><div class="z_activity_img"><img src="https://cdn.xiaobei.beer/event/public/reserve/assets/images/index_08.png" alt="" srcset=""></div></div></div></div></div>


/* 出现弹框时给body加css;禁止滚动 */
.ovfHiden {position: fixed;left: 0;bottom: 0;
}
.z_activity_popup .z_activity_mask {width: 100%;height: 100%;position: fixed;z-index: 100;background: rgba(0, 0, 0, 0.5);top: 0;bottom: 0;right: 0;}.z_activity_popup .z_activity_body {height: 100%;overflow-x: hidden;overflow-y: scroll;color: #fff;font-size: .266667rem;
}.z_activity_popup .z_activity_close {width: 8.5rem;height: .533333rem;border-radius: 0.173333rem;background: rgba(46, 46, 46, 1);position: fixed;top: 14.5%;z-index: 1000;left: 0;right: 0;transform: translate(8.5%, 0);box-sizing: border-box;
}.z_activity_close .z_activity_close_span {color: #000;border-radius: 50%;display: block;width: .533333rem;height: .533333rem;line-height: .533333rem;text-align: center;float: right;font-size: .36rem;
}.z_activity_close_span>img {margin-top: -0.4rem;margin-right: -.5rem;
}.z_activity_popup .z_activity_title {display: flex;justify-content: space-around;align-items: center;color: rgba(255, 255, 255, 1);margin-bottom: .706667rem;
}.z_activity_popup .z_activity_title>span {font-size: 0.533333rem;font-family: PingFang SC;font-weight: bold;line-height: 0.746667rem;
}.z_activity_popup .z_activity_title .z_activity_line {height: 1px;width: 1.773333rem;background: rgba(255, 255, 255, 1);border: none;border-top: 1px solid #555555;
}.z_activity_popup .z_activity_title>.z_activity_line:nth-child(1) {margin-right: .266667rem;
}.z_activity_popup .z_activity_title>.z_activity_line:nth-child(3) {margin-left: .266667rem;
}.z_activity_content {display: flex;justify-content: space-between;align-items: flex-start;margin-bottom: .533333rem;
}/* 凌形样式 */
.z_activity_diamond {width: .186667rem;height: .186667rem;margin-right: .16rem;
}.z_activity_diamond img {width: .186667rem;height: .186667rem;
}.z_activity_popup .z_activity_text {width: 8.226667rem;font-family: PingFang SC;font-weight: 400;line-height: .4rem;color: rgba(255, 255, 255, 1);
}.z_activity_img {width: 100%;display: flex;justify-content: space-between;align-items: center;
}.z_activity_img>img {width: 7.506667rem;height: 5.04rem;
}.z_activity_box {height: 70%;width: 8.573333rem;box-sizing: border-box;padding: 0.48rem 0.453333rem .533333rem 0.453333rem;border-radius: 0.173333rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 102;background: rgba(46, 46, 46, 1);}

禁止body底层滚动方法

添加css.ovfHiden {position: fixed;left: 0;bottom: 0;}

js:

// 活动弹框
function activityPop() {// 出现弹框$('.z_activity_link').on('click', function () {$('.z_activity_popup').show()$('html,body').addClass('ovfHiden');})$('.z_activity_close_span').on('click', function () {$('.z_activity_popup').hide()$('html,body').removeClass('ovfHiden');})
}

css 实现弹框滚动条相关推荐

layer单页弹框去掉滚动条
layer单页弹框去掉滚动条单页的设置中scrollbar没有用方法查看代码中的css,修改里面的overflow:hidden
bootstrap获取弹框数据_Bootstrap模态弹出框的实例教程
前面的话在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
vue手机端回退_vue移动端弹框组件，vue-layer-mobile
最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...
移动端下弹框禁止背景滑动
移动端下弹框禁止背景滑动茴字写法有很多种,找到最适合的才是好的. 以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{height ...
如何点击按钮弹出弹框显示几秒_layer消息框显示在鼠标旁边
layer因为操作简单,界面美观,是开发消息弹窗的不二选择.一般我们都会让消息框采用浮动效果显示在屏幕正中间,但是如果我们的需求是弹框显示在鼠标点击位置的左下角,而且是随滚动条移动的,就像bootst ...
常用UI模板，loading框，提醒框，弹框确认框
css部分 #public_box{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:rgba(0,0 ...
vue移动端弹框组件
这里说一下 vue-layer-mobile插件的使用一.npm 安装 // 当前最新版本 1.2.0 npm install vue-layer-mobile // 如新版遇到问题可回退旧版本 n ...
使用vant 自定义弹框
使用vant制作弹框,具体如下: html层 <van-popupv-model="show"closeableclass="dialog-test"cl ...
弹框在一个很的长页面居中显示
说到这个问题,100%的前端工程师都遇到过.但是这个问题又是不太好形容,所以对此做解释的人自然很少,这里,我要对这个问题,做一下解释,以一个实际的例子引出话题,分析问题.下面先看下,在各种机型上支持的 ...

css 实现弹框滚动条

css 实现弹框滚动条相关推荐

最新文章

热门文章