CSS+彈出遮罩層是Web開發中常用的技術之一。通過遮罩層可以實現頁面的灰化，同時彈出的內容可以吸引用戶的注意力，增加交互體驗。

以下是實現彈出遮罩層的代碼：

/*定義遮罩層樣式*/
.mask {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
/*定義彈出框樣式*/
.popup {
position: fixed;
z-index: 1000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
}
/*關閉按鈕樣式*/
.close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}

通過以上代碼，我們定義了遮罩層的樣式和彈出框的樣式，并且為彈出框添加了關閉按鈕。

接下來，我們需要添加JavaScript代碼來控制遮罩層和彈出框的顯示和隱藏。

//獲取遮罩層和彈出框
var mask = document.getElementById('mask');
var popup = document.getElementById('popup');
//獲取關閉按鈕
var closeBtn = document.getElementById('close-btn');
//彈出框的顯示和隱藏
function showPopup() {
mask.style.display = 'block';
popup.style.display = 'block';
}
function hidePopup() {
mask.style.display = 'none';
popup.style.display = 'none';
}
//為關閉按鈕添加點擊事件
closeBtn.addEventListener('click', hidePopup);
//點擊遮罩層關閉彈出框
mask.addEventListener('click', hidePopup);

通過以上JavaScript代碼，我們實現了彈出框和遮罩層的顯示和隱藏，并且為關閉按鈕和遮罩層添加了點擊事件。

總的來說，CSS+彈出遮罩層是一個實用的技術，它可以幫助我們實現更好的用戶交互和更美觀的頁面效果。