<div> 遮擋層（Overlay）是指在網頁上設置一個覆蓋全屏的透明層，用來阻止用戶對網頁中的其他元素的操作。通常情況下，遮擋層被用來實現彈出窗口、模態框、提示框等功能，以提高用戶體驗和頁面交互效果。
以下是幾個常見的div遮擋層的應用案例：
案例一：彈出窗口 在很多網頁中，點擊按鈕彈出窗口是一種常見的交互方式。使用遮擋層可以實現這一功能。，創建一個遮擋層，設置其背景色為半透明的黑色，并將其寬高都設置為全屏。然后，在遮擋層中添加一個窗口容器，用來顯示彈出窗口的內容。最后，通過控制遮擋層的顯示和隱藏，來實現點擊按鈕顯示彈出窗口的效果。
<div class="overlay"></div> <div class="modal">

彈出窗口標題

彈出窗口內容

</div>
<style> .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; }
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; z-index: 10000; } </style>
<script> // 顯示彈出窗口 function showModal() { document.querySelector('.overlay').style.display = 'block'; document.querySelector('.modal').style.display = 'block'; }
// 隱藏彈出窗口 function hideModal() { document.querySelector('.overlay').style.display = 'none'; document.querySelector('.modal').style.display = 'none'; } </script>
案例二：模態框 模態框是一種常用的對話框，用于在當前頁面中顯示重要信息或者進行一些操作。同樣使用遮擋層來實現模態框的效果。，創建一個遮擋層，設置其背景色為透明，并設置其寬高為全屏。然后，在遮擋層中添加一個模態框容器，用來顯示模態框的內容。最后，通過控制遮擋層的顯示和隱藏，來實現模態框的展示和關閉。
<div class="overlay"></div> <div class="modal">

模態框標題

模態框內容

<button onclick="hideModal()">關閉</button> </div>
<style> .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; }
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; z-index: 10000; } </style>
<script> // 顯示模態框 function showModal() { document.querySelector('.overlay').style.display = 'block'; document.querySelector('.modal').style.display = 'block'; }
// 隱藏模態框 function hideModal() { document.querySelector('.overlay').style.display = 'none'; document.querySelector('.modal').style.display = 'none'; } </script>
通過以上代碼案例，我們可以看到，使用<div> 遮擋層可以很方便地實現彈出窗口和模態框等功能。只需通過設置遮擋層的樣式和控制其顯示和隱藏，就可以實現不同的效果。在實際開發中，可以依據需求進行樣式和功能的定制，達到更好的用戶交互效果和用戶體驗。