ShowModalDialog 是一個用于打開模態對話框的方法，通常用于瀏覽器環境中的 JavaScript 代碼。要實現彈窗交互，你可以使用原生的 window.alert()、window.confirm() 和 window.prompt() 方法，或者使用自定義的模態對話框。
下面是使用原生方法實現彈窗交互的示例：
window.alert() 顯示一個簡單的提示框：window.alert("這是一個提示框");
window.confirm() 顯示一個帶有確認和取消按鈕的對話框：const result = window.confirm("你確定要繼續嗎？");
if (result) {
console.log("用戶點擊了確定");
} else {
console.log("用戶點擊了取消");
}
window.prompt() 顯示一個帶有輸入框的對話框，用戶可以輸入信息：const input = window.prompt("請輸入你的名字：");
if (input !== null) {
console.log("用戶輸入的名字是：" + input);
} else {
console.log("用戶關閉了輸入框");
}
如果你想要創建一個自定義的模態對話框，可以使用 HTML、CSS 和 JavaScript 來實現。下面是一個簡單的自定義模態對話框示例：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定義彈窗示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="openModal">打開彈窗</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span id="closeModal">×</span>
<p>這是一個自定義的彈窗</p>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
CSS (styles.css):
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
JavaScript (scripts.js):
const openModal = document.getElementById("openModal");
const closeModal = document.getElementById("closeModal");
const modal = document.getElementById("myModal");
openModal.onclick = function () {
modal.style.display = "block";
}
closeModal.onclick = function () {
modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
這個示例中，我們創建了一個帶有關閉按鈕的自定義彈窗。點擊 “打開彈窗” 按鈕時，彈窗會顯示出來；點擊關閉按鈕或者點擊彈窗外部區域時，彈窗會消失。你可以根據需要修改這個示例，以實現更復雜的彈窗交互。
