如何使用HTML5新標籤<dialog>

  • 1168字
  • 6分鐘
  • 2024-07-29

在HTML5引入<dialog>標籤之前，前端要想實現一個模態對話框，可謂是費盡腦汁，除了要寫一堆的CSS和JavaScript，還得考慮各種兼容性問題。下面是一個簡單的演示案例：

模擬Modal示例代碼

HTML 部分

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Custom Dialog Example</title>
7
    <link rel="stylesheet" href="styles.css" />
8
  </head>
9
  <body>
10
    <button id="showDialog">Show Dialog</button>
11


12
    <div id="dialogOverlay" class="overlay"></div>
13
    <div id="dialog" class="dialog">
14
      <p>This is a custom dialog box.</p>
15
      <button id="closeDialog">Close</button>
16
    </div>
17


18
    <script src="script.js"></script>
19
  </body>
20
</html>

CSS 部分（styles.css）

1
/* Overlay for the dialog */
2
.overlay {
3
  display: none;
4
  position: fixed;
5
  top: 0;
6
  left: 0;
7
  width: 100%;
8
  height: 100%;
9
  background: rgba(0, 0, 0, 0.5);
10
  z-index: 10;
11
}
12


13
/* Dialog box styles */
14
.dialog {
15
  display: none;
16
  position: fixed;
17
  top: 50%;
18
  left: 50%;
19
  transform: translate(-50%, -50%);
20
  background: white;
21
  padding: 20px;
22
  border-radius: 8px;
23
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
24
  z-index: 20;
25
}
26


27
/* Button styles */
28
button {
29
  margin-top: 20px;
30
  padding: 10px 20px;
31
  border: none;
32
  background: #007bff;
33
  color: white;
34
  border-radius: 4px;
35
  cursor: pointer;
36
}
37


38
button:hover {
39
  background: #0056b3;
40
}

JavaScript 部分（script.js）

1
document.addEventListener("DOMContentLoaded", function () {
2
  const showDialogButton = document.getElementById("showDialog");
3
  const dialog = document.getElementById("dialog");
4
  const dialogOverlay = document.getElementById("dialogOverlay");
5
  const closeDialogButton = document.getElementById("closeDialog");
6


7
  showDialogButton.addEventListener("click", function () {
8
    dialogOverlay.style.display = "block";
9
    dialog.style.display = "block";
10
  });
11


12
  closeDialogButton.addEventListener("click", function () {
13
    dialogOverlay.style.display = "none";
14
    dialog.style.display = "none";
15
  });
16


17
  dialogOverlay.addEventListener("click", function () {
18
    dialogOverlay.style.display = "none";
19
    dialog.style.display = "none";
20
  });
21
});

解釋

  1. HTML 部分：

    • #showDialog 按鈕用於觸發對話框的顯示。
    • #dialogOverlay 是一個覆蓋層，用於模態效果，使背景不可點擊。
    • #dialog 是對話框的主體，其中包含文本和一個關閉按鈕。

  2. CSS 部分：

    • .overlay 類控制覆蓋層的樣式，使其覆蓋整個螢幕並半透明顯示。
    • .dialog 類控制對話框的樣式，使其居中顯示並有一定的樣式。
    • button 樣式控制按鈕的外觀。

  3. JavaScript 部分：

    • 監聽 DOMContentLoaded 事件，以確保在DOM完全加載後運行代碼。
    • 為顯示對話框的按鈕添加 click 事件監聽器，設置覆蓋層和對話框的 display 樣式為 block 以顯示它們。
    • 為關閉對話框的按鈕和覆蓋層添加 click 事件監聽器，設置覆蓋層和對話框的 display 樣式為 none 以隱藏它們。

效果如下：

html+css+js實現的modal效果

HTML5的推動者WHATWG（Web Hypertext Application Technology Working Group）注意到了對標準化對話框的需求。2013年，WHATWG提出了一個新的HTML元素——<dialog>，旨在提供內建的對話框功能。隨後，W3C（World Wide Web Consortium）也開始考慮將<dialog>元素納入HTML標準。該元素的初步規範在HTML Living Standard中進行了定義，並被逐漸納入HTML5.2規範中。最早支持<dialog>元素的瀏覽器是Google Chrome，自Chrome 37（2014年8月）開始支持。其他瀏覽器（如Firefox、Safari）在早期對該元素的支持較慢。截至2023年，現代主流瀏覽器（如Chrome、Firefox、Edge和Safari）均已支持<dialog>元素，使其在Web開發中更加普及。

<dialog>基本用法

  1. 定義對話框：使用 <dialog> 標籤定義一個對話框。
  2. 打開對話框：使用 JavaScript 來打開或關閉對話框。

示例代碼

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Dialog Example</title>
7
    <style>
8
      /* Dialog box styles */
9
      dialog {
10
        border: none;
11
        padding: 20px;
12
        border-radius: 8px;
13
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
14
      }
15
      dialog::backdrop {
16
        background-color: rgba(0, 0, 0, 0.5);
17
      }
18


19
      /* Button styles */
20
      button {
21
        margin-top: 20px;
22
        padding: 10px 20px;
23
        border: none;
24
        background: #007bff;
25
        color: white;
26
        border-radius: 4px;
27
        cursor: pointer;
28
      }
29


30
      button:hover {
31
        background: #0056b3;
32
      }
33
    </style>
34
  </head>
35
  <body>
36
    <button id="showDialog">Show Dialog</button>
37


38
    <dialog id="myDialog">
39
      <p>This is a dialog box.</p>
40
      <button id="closeDialog">Close</button>
41
    </dialog>
42


43
    <script>
44
      const showDialogButton = document.getElementById("showDialog");
45
      const dialog = document.getElementById("myDialog");
46
      const closeDialogButton = document.getElementById("closeDialog");
47


48
      showDialogButton.addEventListener("click", () => {
49
        dialog.showModal();
50
      });
51


52
      closeDialogButton.addEventListener("click", () => {
53
        dialog.close();
54
      });
55
    </script>
56
  </body>
57
</html>

解釋

  1. HTML 部分：

    • 一個按鈕 <button id="showDialog">Show Dialog</button> 用於觸發對話框的顯示。
    • <dialog id="myDialog"> 定義了一個對話框，其中包含一段文本和一個用於關閉對話框的按鈕。

  2. JavaScript 部分：

    • 通過 getElementById 獲取按鈕和對話框的引用。
    • 為顯示對話框的按鈕添加 click 事件監聽器，在事件觸發時調用 dialog.showModal() 方法來顯示對話框。
    • 為關閉對話框的按鈕添加 click 事件監聽器，在事件觸發時調用 dialog.close() 方法來關閉對話框。

效果如下

dialog實現的modal效果

模態與非模態對話框

  • dialog.showModal() 方法用於顯示模態對話框，這會使得背景不可點擊，只有關閉對話框後才能繼續操作背景頁面。
  • dialog.show() 方法用於顯示非模態對話框，用戶仍然可以與背景頁面進行互動。

樣式自訂

我們可以使用CSS來自訂對話框的外觀。例如：

1
<style>
2
  dialog {
3
    border: none;
4
    border-radius: 8px;
5
    padding: 20px;
6
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
7
  }
8
  dialog::backdrop {
9
    background-color: rgba(0, 0, 0, 0.5);
10
  }
11
</style>

這種方法可以讓對話框更具美感和用戶友好性。

兼容性

雖然 <dialog> 標籤在現代瀏覽器中得到了廣泛支持，但一些較舊的瀏覽器可能不支持。如果需要兼容性支持，可以考慮使用 dialog-polyfill庫。

相似的文章

HTMLCollection與NodeList有什麼區別，以及如何獲取它們

HTMLCollection與NodeList有什麼區別，以及如何獲取它們