昨天在家看電視時,退出的時候發(fā)現(xiàn)了一個彈窗效果,整個背景模糊,覺得這樣的效果好炫,要比純色加透明度高大上好多,連續(xù)試了幾個界面,最終確定效果由css實現(xiàn)的,于是今天一大早來到公司便趕緊搜索了一下,雖然兼容性奇差,但是一個css屬性就可以搞定。瞬間感覺自己知道的真是太少了~~
首先回憶一下彈窗的實現(xiàn),一般我們分為兩層,彈出窗口層(popus)和遮罩層(mask),通常情況下我習慣就這兩元素全部設(shè)成fixed定位,具體和absolute區(qū)別一試便知。對于mask層自不用多少,我們?nèi)缦陆o他設(shè)置屬性,讓他鋪滿整個屏幕。
.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: