1. 背景鎖定與滾動條引起的抖動問題
瀏覽網頁時經常會發現彈框出現後，滾動滑鼠時，蒙版下面的頁面還是可以滾動的，其實這些滾動都是沒必要的，因為彈框的原意就是要聚焦多用户的注意力。
因此我們要做的是 – 背景鎖定 (從技術角度其實是暫時性幹掉滾動條) 。
從前端同學扒出其技術原理如下：
當 Dialog 彈框出現的時候，根元素 overflow:hidden.
此時，由於頁面滾動條從有到無，頁面會晃動，這樣糟糕的體驗顯然是不能容忍了，於是，對元素進行處理，右側增加一個滾動條寬度 (假設寬度是 widthScrollbar) 的透明邊框。
Dialog 隱藏的時候再把滾動條放開。
2. 避免彈框上再彈出彈框
要儘量避免在彈框上再彈一層彈框，2 層蒙版會讓多用户覺得負擔很重。可以改用輕量彈框或重新把互動梳理。
3. 蒙版增強品牌感
過去我們對蒙版顏色可能沒有仔細關注過，也許顏色不是純黑 #000，就是純白 #fff 。其實蒙版的顏色及透明度可以再深入搭配的，例如產品是藍色調性的可以在黑色中混入一點藍色，產品是輕盈的可以用白色或淡灰色，或者嘗試用沒那麼深的顏色搭配高一點透明度等等，根據產品的調性設計出一個適合產品氣質的蒙版。
Tumblr 的蒙版顏色採用了它的品牌色 rgba(54,70,93,.95)
Twitch 的蒙版顏色在黑色中混入了一點紫色 rgba(32,28,43,.9)，與它的品牌色相符。
對彈框的其他思考
未來的趨勢
移動在影響着人們生活，也同時引領着設計趨勢，這些年產品都在追求多終端的一致性，早已衍生出自適應網頁設計 (Responsive Web Design) 的佈局解決方案，因此網頁設計也日趨移動化。可以想像將會有一大波移動上的體驗會搬到網頁設計上，如彈框中包含多個層級，透過左上角返回的互動體驗，更靈動及細膩的動畫效果等。
視覺表現方面，之前也提到過，將會有更多產品會為了在大螢幕下有更好的視覺效果做出針對性的設計。而隨着產品愈來愈追求簡潔，UI 也變得愈來愈輕盈，甚至透明。彈框也許不再需要用一個框框去包住主體。市面上已經有不少產品使用這種手法，以整個螢幕來取代框框。
這些也許是未來的一個趨勢, 讓我們拭目以待。
Squarespace 的登入彈框
Evernote 的修改標籤彈框