1. 這不僅僅是在APP等移動端常常見到的應用，在網頁中也常常遇到。作者在書中給出了4種解決方法，我測試了這幾種方法，當然不是每一種方法都和合適，所以推薦大家三種常用的方法

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

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;   
 
}

到此就達到了上述效果

但這種方法有缺點

1. 增加了html結構
2. 當我們顯示對話框時，便不能再與頁面其他組件進行交互（有時候卻是一個優點）

方法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不會捕捉任何鼠標互動，所以頁面中的其他元素我們仍然可以點擊使用

總結：

當我們可以使用第二種方法時盡量使用第二種方法，
其次第一種方法可以作為備用
第三種方法當要求與頁面其他元素互動時使用比較合適