這不僅僅是在APP等移動端常常見到的應用,在網頁中也常常遇到。作者在書中給出了4種解決方法,我測試了這幾種方法,當然不是每一種方法都和合適,所以推薦大家三種常用的方法
我們可以看看其最終的效果
lightbox
小測試
方法1 -- HTML添加一個深色覆蓋圖層
html
<div class="overlay">
<div class="lightbox"> </div>
</div>
第一步:
將overlay設置成fixed,并占滿屏幕,調整期背景色為半透明深色
css
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0,0,0,.8);
第二步:
我們將lightbox設置成fixed布局,并設置其圖層為
z-index : 1
其次就是居中顯示了(常常用于dialog對話框)
css
.lightbox{
position: fixed;
width: 200px;
height: 200px;
background: white;
left: calc(50% - 100px);
top: calc(50% - 100px);
z-index: 1;
}
到此就達到了上述效果
但這種方法有缺點
- 增加了html結構
- 當我們顯示對話框時,便不能再與頁面其他組件進行交互(有時候卻是一個優點)
方法2 -- 添加一個偽元素來解決
首先我們不再需要上述復雜的html標簽,我們只需簡單的在body或者這個容器上套用類名(dimmed)
---這真的是一個比較大的不足之處,假如我們要在容器上加入其它偽元素,這個方法就力不從心了
css
body.dimmed::before{
content: '';
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 1;
background: rgba(0,0,0,.8);
}
lightbox和方法一中一樣,我們讓其居中顯示
方法3 -- boxshadow解決方法
利用擴大box-shadow的擴散半徑,并把平移值和模糊設置為0,建立一個非常大的陰影
box-shadow: 0 0 0 999px rgba(0,0,0,.8);
但是存在一個問題,它并不支持 非常大的解析度(>2000px),所以采用了可視范圍單位vmax
1vmax 等于 1vw或1vh,取決于哪個更大選擇哪個
所以設置成:
box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);
這里有個需要注意的地方,這個方法最好使用在元素有固定定位和網頁不能滾動時使用
當然還有一個很重要的特性,box-shadow不會捕捉任何鼠標互動,所以頁面中的其他元素我們仍然可以點擊使用
總結:
當我們可以使用第二種方法時盡量使用第二種方法,
其次第一種方法可以作為備用
第三種方法當要求與頁面其他元素互動時使用比較合適