弹窗细节

一、 背景锁定与滚动条引起的抖动问题

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

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

技术原理:当Dialog弹框出现的时候,根元素overflow:hidden.

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

$(document.body).css('border-right',widthScrollbar+'px solid transparent');

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

二、避免弹框上再弹出弹框

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老马寒门IT

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。

532100
来自专栏高爽的专栏

HTML图片热点

       目前在改进内部系统的一个功能,前端给出了效果图,从前段到后端都需要自己来写了,好在自己对前端的技术也略有涉猎。        页面需要实现一个按钮...

41100
来自专栏pangguoming

html5调用手机陀螺仪实现方向辨识

我们可以让document监听deviceorientation 来获取相关的数据,里面包括3个值 alpha、beta和gamma。

40610
来自专栏前端新视界

两个 viewports 的故事-第二部分

原文:A tale of two viewports — part two 译者:nzbin 在这个迷你系列中,我将解释 viewports 和各种重要元素...

22770
来自专栏微信小程序开发

CSS实现多列复杂界面布局

最近做一个云客服项目,可以把多个微信号消息集中到一个客服平台中,方便统一管理,这里就不详细说客服平台的功能。 做为码农,工作职责就是把功能实现了,在此,我简单说...

855130
来自专栏钱塘大数据

【干货】如何提升Excel表格的颜值?

下载了几个歪果仁做的Excel表格,非常的漂亮: ? ? 再看看我们最常见的表格,难看的瞬间爆表 ? 兰色对歪果仁的表格好看的原因进行了归纳,下面我们按歪果仁...

44490
来自专栏静晴轩

CSS实现水平|垂直居中漫谈

利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right mar...

36790
来自专栏姬小光

【第013期】如何查看页面图片尺寸

网页上的元素实际渲染的时候,其实都是方形的。由于很多图片有白色或者透明的背景,对于设计师来说,打开最终的网页并不能看出页面上的图片是否有按自己的设计实现。

12560
来自专栏老马寒门IT

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定...

46860
来自专栏九彩拼盘的叨叨叨

Web动画性能介绍

帧率(FPS):描述每秒播放的帧数,单位为 Hz 或者 frame/s (帧/秒)。

12030

扫码关注云+社区

领取腾讯云代金券