HTML - <dialog> 標籤

HTML <dialog> 標籤用於表示對話方塊、警報框或子視窗。

它有一個名為 open 的屬性，指示對話方塊處於活動狀態並且可以與之互動。如果未設定 open 屬性，則對話方塊將不會顯示在螢幕檢視上，使用者也無法看到它。您可以使用 dialog 元素在使用者點選任何表單按鈕時向其發出一些警報訊息。

語法

   <dialog>.....</dialog>

屬性

HTML 資料標籤支援 HTML 的全域性和事件屬性。也接受特定的屬性，如下所示。

屬性	值	描述
open	open	指示對話方塊處於活動狀態並且可以與之互動。

HTML dialog 標籤示例

以下示例將說明 dialog 標籤的使用。在哪裡、何時以及如何使用 dialog 標籤建立對話方塊、警報框或子視窗。

建立對話方塊

以下程式說明了 HTML <dialog> 標籤的使用。我們沒有在 <dialog> 標籤內使用 'open' 屬性。因此，在程式執行後，不會顯示任何對話方塊，因為預設情況下它是關閉的。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML dialog box</title>
</head>
<body>
   <!--create a dialog element-->
   <p>Example of the HTML 'dialog' element</p>
   <dialog>Alert</dialog>
</body>
</html>

預設開啟的對話方塊

以下是 HTML <dialog> 框的另一個示例。在這裡，我們使用 <dialog> 標籤建立一個對話方塊。我們在 'dialog' 元素內部使用 'open' 屬性，因此當我們執行程式時，螢幕檢視上會顯示一個對話方塊。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML dialog box</title>
</head>
<body>
   <p>Example of the HTML 'dialog' element</p>
   <!--create a dialog element-->
   <dialog open>Dialog box!</dialog>
</body>
</html>

設定對話方塊樣式

在以下示例中，我們使用 HTML <dialog> 標籤建立一個對話方塊，並使用 CSS 設定建立的對話方塊的樣式。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML dialog box</title>
   <style>
      dialog {
         width: 100px;
         height: 50px;
         background-color: red;
         color: white;
         display: grid;
         place-items: center;
         border-radius: 5px;
      }
   </style>
</head>
<body>
   <p>Example of the HTML 'dialog' element</p>
   <!--create a dialog element-->
   <dialog open>Alert box!</dialog>
</body>
</html>

在對話方塊中建立表單

在此示例中，我們使用 HTML <dialog> 標籤建立一個對話方塊，並在 dialog 元素中建立一個名為“確定”的按鈕的“表單”，當用戶單擊“確定”按鈕時，對話方塊將消失。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML dialog box</title>
   <style>
      dialog {
         background-color: red;
         color: white;
      }
   </style>
</head>
<body>
   <p>Example of the HTML 'dialog' element</p>
   <!--create a dialog element-->
   <dialog open>
      <p>Warning!</p>
      <form method="dialog">
      <button>Ok</button>
      </form>
   </dialog>
</body>
</html>

支援的瀏覽器

標籤
dialog	是 37.0	是 79.0	是 98.0	是 15.4	是 24.0

html_tags_reference.htm

列印頁面