在網站開發中，我們通常需要設計一些讓用戶進行登陸操作的交互界面。其中，彈出對話框是一種常見的方式。在HTML中，我們可以使用 JavaScript 來實現。

// 創建彈出對話框的方法
function showDialog() {
// 創建遮罩層，防止用戶在彈出框外進行操作
var mask = document.createElement('div');
mask.id = 'mask';
document.body.appendChild(mask);
// 創建彈出框
var dialog = document.createElement('div');
dialog.id = 'dialog';
dialog.innerHTML = 
<h2>請登錄</h2>
<form>
<p><input type="text" placeholder="用戶名"></p>
<p><input type="password" placeholder="密碼"></p>
<p><button type="submit">登錄</button></p>
</form>;
document.body.appendChild(dialog);
// 設置彈出框的位置
var x = (window.innerWidth - dialog.offsetWidth) / 2;
var y = (window.innerHeight - dialog.offsetHeight) / 2;
dialog.style.left = x + 'px';
dialog.style.top = y + 'px';
// 綁定關閉彈出框的方法
mask.onclick = dialog.onclick = function() {
document.body.removeChild(mask);
document.body.removeChild(dialog);
};
}
// 調用彈出對話框的方法
showDialog();

在代碼中，我們首先創建了一個方法 showDialog()，用來創建遮罩層和彈出框。在彈出框中，我們建立了一個表單，其中包含輸入用戶名、密碼和一個用于提交表單的登錄按鈕。

接下來，我們設置了彈出框的位置，使其位于屏幕中央，然后通過綁定 click 事件來讓遮罩層和彈出框可以關閉。

當然，這只是一個初步的例子，我們可以根據自己的需求設計更加美觀、實用的彈出對話框。希望這篇文章能夠幫助到您。