jQuery 遮罩層可以幫助我們把彈窗或者其他提示信息展現在用戶面前,同時將頁面的其他元素覆蓋住,以便用戶專注于當前提示信息的處理。
然而,在某些情況下,我們需要讓用戶有機會取消當前的操作,關閉遮罩層,回到頁面的其他部分。這就需要我們在遮罩層上添加一個“取消”按鈕,并通過 jQuery 監聽這個按鈕的點擊事件,來處理它的行為。
// 在 HTML 中添加一個取消按鈕 <div id="mask"> <div class="popup"> <p>提示信息內容……</p> <button id="cancel-btn">取消</button> </div> </div> // 在 jQuery 中綁定取消按鈕的點擊事件 $(document).ready(function() { $('#cancel-btn').click(function() { $('#mask').hide(); }); });
上面的代碼會先在 HTML 中添加一個 ID 為 mask 的容器元素,并在其中添加一個類名為 popup 的彈窗。在彈窗中,我們添加了一個按鈕,并指定了它的 ID 為 cancel-btn。
在 jQuery 中,我們使用 $(document).ready() 方法來等待頁面加載完畢,然后使用 $('#cancel-btn').click() 方法來監聽取消按鈕的點擊事件。在方法內部,我們使用 $('#mask').hide() 方法來隱藏整個遮罩層,讓用戶回到頁面的其他部分。
這樣,我們就成功地實現了一個帶有取消按鈕的 jQuery 遮罩層,并通過代碼示例演示了如何完成它的行為。