弹窗细节
一、 背景锁定与滚动条引起的抖动问题
浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力。
因此我们要做的是 – 背景锁定(从技术角度其实是暂时性干掉滚动条)。
技术原理：当Dialog弹框出现的时候，根元素overflow:hidden.
problem：此时，由于页面滚动条从有到无，页面会晃动，这样糟糕的体验显然是不能容忍了，于是，对<body>元素进行处理，右侧增加一个滚动条宽度（假设宽度是widthScrollbar）的透明边框。
$(document.body).css('border-right',widthScrollbar+'px solid transparent');Dialog隐藏的时候再把滚动条放开。
二、避免弹框上再弹出弹框
要尽量避免在弹框上再弹一层弹框，2层蒙版会让用户觉得负担很重。可以改用轻量弹框或重新把交互梳理。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-08-09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录