JQuery 遮罩層是一種常見的網(wǎng)頁效果，能夠在用戶點擊某個按鈕或鏈接時，將當(dāng)前網(wǎng)頁的內(nèi)容暫時覆蓋，從而彈出一個新的提示、彈窗或菜單等交互窗口。這種效果通常使用半透明的遮罩層來實現(xiàn)，讓用戶專注于處理當(dāng)前窗口的內(nèi)容。

$(document).ready(function() {
// 獲取遮罩層元素
var overlay = $('
');
// 設(shè)置遮罩層樣式
overlay.css({
'position': 'fixed',
'top': '0',
'left': '0',
'width': '100%',
'height': '100%',
'z-index': '99999',
'background-color': 'rgba(0, 0, 0, 0.5)',
'display': 'none'
});
// 將遮罩層插入到文檔中
$('body').append(overlay);
// 點擊開關(guān)按鈕時，切換遮罩層的顯示/隱藏狀態(tài)
$('#open-button').click(function() {
if (overlay.is(':hidden')) {
overlay.fadeIn(200);
} else {
overlay.fadeOut(200);
}
});
});

JQuery 遮罩層的實現(xiàn)原理比較簡單：首先創(chuàng)建一個半透明的 DIV 元素，設(shè)置其 CSS 樣式為 position: fixed，使其始終覆蓋在網(wǎng)頁內(nèi)容的最上層；然后根據(jù)需要在用戶點擊某個開關(guān)按鈕時，通過 JQuery 的 fadeOut/fadeIn 操作切換遮罩層的顯示/隱藏狀態(tài)即可。需要注意的是，遮罩層 z-index 值應(yīng)該設(shè)置為比網(wǎng)頁中其他元素的 z-index 值盡可能高，以確保其覆蓋效果生效。