1. 這不僅僅是在APP等移動(dòng)端常常見(jiàn)到的應(yīng)用，在網(wǎng)頁(yè)中也常常遇到。作者在書中給出了4種解決方法，我測(cè)試了這幾種方法，當(dāng)然不是每一種方法都和合適，所以推薦大家三種常用的方法

2. 我們可以看看其最終的效果

lightbox

小測(cè)試

方法1 -- HTML添加一個(gè)深色覆蓋圖層

html

<div class="overlay">
    <div class="lightbox"> </div>
</div>

第一步：
將overlay設(shè)置成fixed，并占滿屏幕，調(diào)整期背景色為半透明深色
css

position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0,0,0,.8);

第二步：
我們將lightbox設(shè)置成fixed布局，并設(shè)置其圖層為

z-index : 1

其次就是居中顯示了（常常用于dialog對(duì)話框）
css

.lightbox{ 
   position: fixed; 
   width: 200px;  
   height: 200px;  
   background: white;  
   left: calc(50% - 100px); 
   top: calc(50% - 100px);  
   z-index:  1;   
 
}

到此就達(dá)到了上述效果

但這種方法有缺點(diǎn)

1. 增加了html結(jié)構(gòu)
2. 當(dāng)我們顯示對(duì)話框時(shí)，便不能再與頁(yè)面其他組件進(jìn)行交互（有時(shí)候卻是一個(gè)優(yōu)點(diǎn)）

方法2 -- 添加一個(gè)偽元素來(lái)解決

首先我們不再需要上述復(fù)雜的html標(biāo)簽，我們只需簡(jiǎn)單的在body或者這個(gè)容器上套用類名（dimmed）
---這真的是一個(gè)比較大的不足之處，假如我們要在容器上加入其它偽元素，這個(gè)方法就力不從心了
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解決方法

利用擴(kuò)大box-shadow的擴(kuò)散半徑，并把平移值和模糊設(shè)置為0，建立一個(gè)非常大的陰影

box-shadow: 0 0 0 999px rgba(0,0,0,.8);

但是存在一個(gè)問(wèn)題，它并不支持 非常大的解析度（>2000px）,所以采用了可視范圍單位vmax

1vmax 等于 1vw或1vh,取決于哪個(gè)更大選擇哪個(gè)

所以設(shè)置成：

box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);

這里有個(gè)需要注意的地方，這個(gè)方法最好使用在元素有固定定位和網(wǎng)頁(yè)不能滾動(dòng)時(shí)使用
當(dāng)然還有一個(gè)很重要的特性，box-shadow不會(huì)捕捉任何鼠標(biāo)互動(dòng)，所以頁(yè)面中的其他元素我們?nèi)匀豢梢渣c(diǎn)擊使用

總結(jié)：

當(dāng)我們可以使用第二種方法時(shí)盡量使用第二種方法，
其次第一種方法可以作為備用
第三種方法當(dāng)要求與頁(yè)面其他元素互動(dòng)時(shí)使用比較合適