在Web開發中，經常需要實現一個遮罩層登錄界面。而JQuery是一款非常流行的JavaScript框架，可以幫助我們更方便地實現這個功能。

下面是一個使用JQuery實現的遮罩層登錄界面的示例代碼：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div id="mask" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);display:none">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: white; padding: 20px">
<form id="login-form">
<input type="text" name="username" placeholder="請輸入用戶名"/><br/>
<input type="password" name="password" placeholder="請輸入密碼"/><br/>
<button type="submit">登錄</button>
</form>
</div>
</div>
<script>
$(document).ready(function(){
$("#mask").show();
$("#login-form").submit(function(e){
e.preventDefault();
//登錄驗證邏輯
$("#mask").hide();
});
});
</script>

代碼中，使用了一個div元素作為遮罩層，并設置了其樣式為fixed定位，使其覆蓋在網頁內容上方。在這個div中，又嵌套了一個div用于顯示登錄框，登錄框的樣式及表單元素的設置都放在了這個div中。

代碼中addEventListener函數用于監聽表單提交事件，當用戶點擊登錄按鈕時，會觸發這個事件并執行內部的函數。在這個函數中，使用preventDefault函數來阻止表單的默認提交行為，然后可以添加自己的登錄驗證邏輯。最后，使用hide函數將遮罩層隱藏起來，回到主頁面。