ShowModalDialog
是一個 JavaScript 函數(shù),用于顯示一個模態(tài)對話框(modal dialog),通常用于向用戶請求信息或確認操作。在表單提交過程中,可以使用 ShowModalDialog
來實現(xiàn)一些交互式的操作,例如確認刪除操作、提示輸入額外的信息等。
以下是一個簡單的示例,展示了如何在表單提交中使用 ShowModalDialog
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with ShowModalDialog</title>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>
<button type="submit">Submit</button>
</form>
<script src="script.js"></script>
</body>
</html>
script.js
,并在其中編寫以下代碼:document.getElementById('myForm').addEventListener('submit', function (event) {
event.preventDefault(); // 阻止表單默認提交行為
// 顯示模態(tài)對話框
showModalDialog();
});
function showModalDialog() {
const dialog = document.createElement('div');
dialog.style.position = 'fixed';
dialog.style.top = '0';
dialog.style.left = '0';
dialog.style.width = '100%';
dialog.style.height = '100%';
dialog.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
dialog.style.display = 'flex';
dialog.style.justifyContent = 'center';
dialog.style.alignItems = 'center';
const content = document.createElement('div');
content.style.backgroundColor = 'white';
content.style.padding = '20px';
content.style.borderRadius = '5px';
content.style.width = '300px';
const message = document.createElement('p');
message.style.margin = '0';
message.textContent = 'Are you sure you want to submit the form?';
const confirmButton = document.createElement('button');
confirmButton.style.marginRight = '10px';
confirmButton.textContent = 'Yes';
confirmButton.onclick = function () {
submitForm();
closeDialog();
};
const cancelButton = document.createElement('button');
cancelButton.textContent = 'No';
cancelButton.onclick = function () {
closeDialog();
};
content.appendChild(message);
content.appendChild(confirmButton);
content.appendChild(cancelButton);
dialog.appendChild(content);
document.body.appendChild(dialog);
function closeDialog() {
document.body.removeChild(dialog);
}
}
function submitForm() {
// 在這里執(zhí)行表單提交操作,例如發(fā)送 AJAX 請求
console.log('Form submitted!');
}
在這個示例中,當(dāng)用戶點擊提交按鈕時,會顯示一個模態(tài)對話框,詢問用戶是否確實要提交表單。用戶可以選擇“Yes”或“No”,對應(yīng)的操作會執(zhí)行相應(yīng)的邏輯。