码迷,mamicode.com
首页 > 其他好文 > 详细

弹窗细节

时间:2016-08-09 12:14:09      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:

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

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

 

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

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

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

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

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

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

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

 

弹窗细节

标签:

原文地址:http://www.cnblogs.com/chaoran/p/5752500.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!