JQuery遮罩層是Web設計中必不可少的效果之一。它可以在頁面中彈出一個覆蓋整個頁面的層，在彈出層內顯示浮動窗口或其他相關內容。接下來，本文將介紹如何使用JQuery編寫遮罩層效果。

首先，我們需要引入JQuery庫。然后，創建遮罩層的HTML代碼，將其加入到頁面中：

<div id="mask" style="display:none;"></div>

然后，我們使用CSS定義遮罩層的樣式，使其覆蓋整個頁面：

#mask {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
z-index:9999;
}

代碼中，我們使用了CSS中的position屬性，將遮罩層設置為固定定位。通過top、left、width、height屬性設置其寬高及位置。接著，我們使用rgba()函數定義了遮罩層的背景色及顏色透明度。最后，我們將遮罩層的z-index屬性設置為較高的數字，以確保它在頁面中的上方層顯示。

最后，我們使用JQuery為遮罩層添加點擊事件，當用戶單擊遮罩層時，隱藏彈出層及遮罩層：

$(function(){
$('#mask').click(function(){
$(this).hide();
$('#popup').hide();
});
});

代碼中，我們使用JQuery的click()方法添加了一個事件監聽器，當用戶單擊遮罩層時，我們通過show()和hide()方法顯示及隱藏彈出層及遮罩層。

至此，我們已經可以使用JQuery編寫出一個簡單的遮罩層效果。