點擊遮罩層是Web開發中常用的技術之一，它可以實現在頁面上彈出模態框或菜單欄，使用戶可以與頁面進行交互，同時限制用戶對頁面中其他元素的訪問。下面是一個實現點擊遮罩層的CSS代碼示例：

/* 遮罩層 */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}
/* 彈出框 */
.dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
z-index: 1000;
display: none;
}
/* 點擊遮罩層關閉彈出框 */
.overlay.show {
display: block;
}
.overlay.show + .dialog {
display: block;
}
/* 點擊彈出框外部區域關閉彈出框 */
.dialog-container {
position: relative;
}
.dialog-container .dialog-close {
position: absolute;
top: 0;
right: 0;
padding: 5px;
cursor: pointer;
}
.dialog-container.show .dialog-close {
display: block;
}

在上面的代碼中，.overlay代表遮罩層，.dialog代表彈出框。一開始兩者均設為不可見狀態（display: none;），只有在需要彈出框時才通過添加.show類來顯示出來（display: block;）。此外，在遮罩層上覆蓋了一個透明度為0.5的黑色背景，使得頁面上其他元素變得不可點擊。

此外，代碼還實現了一些額外的功能，例如點擊遮罩層或彈出框外部區域關閉彈出框。其中，添加.overlay.show類會同時使得遮罩層和彈出框都顯示出來。而對于關閉彈出框的操作，則是通過為彈出框外部容器添加.dialog-container.show類實現的。這樣一來，只有當彈出框外部區域被點擊時，才會自動關閉彈出框。