1.背景锁定与滚动条引起的抖动问题

浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力。

因此我们要做的是–背景锁定(从技术角度其实是暂时性干掉滚动条)。

从前端同学扒出其技术原理如下：

当弹框出现的时候，根元素:.

此时，由于页面滚动条从有到无，页面会晃动，这样糟糕的体验显然是不能容忍了，于是，对元素进行处理，右侧增加一个滚动条宽度(假设宽度是)的透明边框。

隐藏的时候再把滚动条放开。

2.避免弹框上再弹出弹框

要尽量避免在弹框上再弹一层弹框，2层蒙版会让用户觉得负担很重。可以改用轻量弹框或重新把交互梳理。

3.蒙版增强品牌感

过去我们对蒙版颜色可能没有仔细关注过，也许颜色不是纯黑#000，就是纯白#。其实蒙版的颜色及透明度可以再深入搭配的，例如产品是蓝色调性的可以在黑色中混入一点蓝色，产品是轻盈的可以用白色或淡灰色，或者尝试用没那么深的颜色搭配高一点透明度等等，根据产品的调性设计出一个适合产品气质的蒙版。

的蒙版颜色採用了它的品牌色(54,70,93,.95)

的蒙版颜色在黑色中混入了一点紫色(32,28,43,.9)，与它的品牌色相符。

对弹框的其他思考

未来的趋势

移动在影响著人们生活，也同时引领著设计趋势，这些年产品都在追求多终端的一致性，早已衍生出自适应网页设计()的布局解决方案，因此网页设计也日趋移动化。可以想像将会有一大波移动上的体验会搬到网页设计上，如弹框中包含多个层级，透过左上角返回的交互体验，更灵动及细腻的动画效果等。

视觉表现方面，之前也提到过，将会有更多产品会为了在大屏幕下有更好的视觉效果做出针对性的设计。而随著产品愈来愈追求简洁，也变得愈来愈轻盈，甚至透明。弹框也许不再需要用一个框框去包住主体。市面上已经有不少产品使用这种手法，以整个屏幕来取代框框。

这些也许是未来的一个趋势,让我们拭目以待。

的登录弹框

的修改标签弹框

湖北网站制作公司：网站设计中几个容易被忽视的弹框细节

以上就是关于“网站设计中几个容易被忽视的弹框细节”的相关知识！，互联网作为当下信息量大和用户多的一个媒体平台，传播信息可谓是快、准、狠，很多企业正是看中了互联网这一特性，往往都会优先选择网络来宣传自己的品牌和产品。但是，苦于对互联网的认识不够全面，往往为了跟风，盲目花个几千上万块钱来找人家来做个传统型网站，然后又花点钱去做推广，之后，钱是花出去了，网站也做了，结果却差强人意，钱就如同打水漂一样。究其原因，这往往是传统型网站存在的弊端所致。武汉怡橙科技，有7年建站经验，我们懂建站，更懂营销。想要了解更多“网站设计中几个容易被忽视的弹框细节”的信息，欢迎各位用户在线咨询我们！咨询电话：400-960-5068！