CSS中的遮罩彈窗技術被廣泛應用于Web開發中，它為用戶提供了一種具有交互性的、創新性的界面體驗。想要在自己的網站上實現這種效果，下面的代碼為您提供了一些參考。

.popup{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
height: 300px;
background-color: white;
border-radius: 5px;
padding: 20px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
z-index: 10001; 
}
.mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 10000;
}

上述代碼中，.popup是用來設置彈窗的樣式的，它的position屬性被設置成了fixed，也就是說它不會因為頁面滾動而改變位置。同時，它的left和top屬性被設為50%，就是為了讓它出現在屏幕的中央。關鍵的是，我們還使用了transform: translate(-50%,-50%)這樣的語句，將其向左上移動了50%的寬度和高度，從而實現了精確的定位。

而.mask則是用來設置遮罩層的樣式的，它的寬度和高度被設置成100%，能夠將整個頁面遮蓋住。還有它的background-color屬性，表示背景顏色，我們設置了rgba(0,0,0,0.5)這種半透明的黑色，會產生一種模糊感。

在實現彈窗功能時，我們還需要添加一些JavaScript代碼，針對某個事件，比如按鈕的點擊事件，來決定何時顯示或隱藏遮罩彈窗。

當然，這只是CSS實現遮罩彈窗的一種方式，每個開發者都可以根據自己的需求進行調整，達到自己想要的效果。