昨天在家看電視時，退出的時候發(fā)現(xiàn)了一個彈窗效果，整個背景模糊，覺得這樣的效果好炫，要比純色加透明度高大上好多，連續(xù)試了幾個界面，最終確定效果由css實現(xiàn)的，于是今天一大早來到公司便趕緊搜索了一下，雖然兼容性奇差，但是一個css屬性就可以搞定。瞬間感覺自己知道的真是太少了~~
首先回憶一下彈窗的實現(xiàn)，一般我們分為兩層，彈出窗口層（popus）和遮罩層（mask）,通常情況下我習慣就這兩元素全部設成fixed定位，具體和absolute區(qū)別一試便知。對于mask層自不用多少，我們?nèi)缦陆o他設置屬性,讓他鋪滿整個屏幕。
.mask{position:fixed;top:0px;bottom:0px;left:0px;right:0px;background-color:#000;opacity:0.6;filter:alpha(opacity=60)}
popus層則要稍微麻煩點兒，這里我們有兩種實現(xiàn)方法
1.已知大小的彈窗，如下，主要通過top,left與負的margin來實現(xiàn)。
.popus{width:300px;height:200px;position:fixed;left:50%;top:50%;margin-left:-150px;margin-top:-100px;background-color:#000} 2.未知彈窗大小，則通過js獲取彈窗層的width與height，然后在進行如上設置，在此不多述。
3.在支持css3的情況下，我們不需要知道彈窗的寬高，便可進行如下設置
.popus{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)}
主要通過translate屬性來設置，偏移的值百分比是相對于本身的寬高，因此從原理上來說跟第一種寫法有異曲同工之妙，不過使用卻更方便。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應用分析 2017-07-26
- 集合結合數(shù)據(jù)結構來看看(二) 2017-07-26
學習是年輕人改變自己的最好方式