ShowModalDialog如何實(shí)現(xiàn)彈窗交互

小樊
82
2024-10-16 13:28:13

ShowModalDialog 是一個(gè)用于打開模態(tài)對(duì)話框的方法，通常用于瀏覽器環(huán)境中的 JavaScript 代碼。要實(shí)現(xiàn)彈窗交互，你可以使用原生的 window.alert()、window.confirm() 和 window.prompt() 方法，或者使用自定義的模態(tài)對(duì)話框。

下面是使用原生方法實(shí)現(xiàn)彈窗交互的示例：

  1. 使用 window.alert() 顯示一個(gè)簡(jiǎn)單的提示框：
window.alert("這是一個(gè)提示框");
  1. 使用 window.confirm() 顯示一個(gè)帶有確認(rèn)和取消按鈕的對(duì)話框：
const result = window.confirm("你確定要繼續(xù)嗎？");
if (result) {
  console.log("用戶點(diǎn)擊了確定");
} else {
  console.log("用戶點(diǎn)擊了取消");
}
  1. 使用 window.prompt() 顯示一個(gè)帶有輸入框的對(duì)話框，用戶可以輸入信息：
const input = window.prompt("請(qǐng)輸入你的名字：");
if (input !== null) {
  console.log("用戶輸入的名字是：" + input);
} else {
  console.log("用戶關(guān)閉了輸入框");
}

如果你想要?jiǎng)?chuàng)建一個(gè)自定義的模態(tài)對(duì)話框，可以使用 HTML、CSS 和 JavaScript 來(lái)實(shí)現(xiàn)。下面是一個(gè)簡(jiǎn)單的自定義模態(tài)對(duì)話框示例：

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">&times;</span>
      <p>這是一個(gè)自定義的彈窗</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";
  }
}

這個(gè)示例中，我們創(chuàng)建了一個(gè)帶有關(guān)閉按鈕的自定義彈窗。點(diǎn)擊 “打開彈窗” 按鈕時(shí)，彈窗會(huì)顯示出來(lái)；點(diǎn)擊關(guān)閉按鈕或者點(diǎn)擊彈窗外部區(qū)域時(shí)，彈窗會(huì)消失。你可以根據(jù)需要修改這個(gè)示例，以實(shí)現(xiàn)更復(fù)雜的彈窗交互。

0 踩