掌握 HTMLlt;dialog> 元素：模態框的本機解決方案

元素：模態框的本機解決方案" />

簡介： Dialog 標籤是在HTML5 中引入的，您知道這意味著什麼，僅此而已被連結到外部解決方案，例如用於這些模式和彈出視窗的Bootstrap！透過 HTML5 的原生元素，您可以直接在程式碼中建立對話方塊、提示和彈出視窗。

讓我們在對話方塊標籤內建立一個簡單的表單和一個按鈕，點擊該按鈕將會神奇地開啟該表單。

建立對話框（比您想像的更簡單！）：

<dialog id="my-dialog">
    <div class="content">
      <form method="dialog">
        <p>Form inside a dialog</p>
        <div>
          <label for="name">Name: </label>
          <input type="text" id="name" name="name" />
        </div>
        <menu>
            <button type="submit">Submit</button>
            <button type="button">Cancel</button>
        </menu>
      </form>
    </div>
</dialog>
<button class="open-btn">Open Dialog</button>

說明：我們在其中建立了一個巢狀表單。該表單要求提供名稱（因為命名當然是程式設計中最困難的部分）。我們新增了兩個 CTA，一個用於提交表單，另一個用於取消表單。簡單易行。

讓我們切換對話框的可見性：

預設情況下，對話框是害羞的（即，它們是隱藏的），但不要擔心！只需一點 JavaScript，我們就可以讓它們付諸行動！這是魔法咒語：

<script>
   const dialog = document.getElementById("my-dialog");

   function showDialog() {
     dialog.showModal();
   }

   function closeDialog() {
     dialog.close();
   }
</script>

說明：我們使用querySelector來選擇我們的對話框。然後，我們編寫兩個函數——一個用於開啟對話框，一個用於關閉對話框。就像那樣 - 對話框根據您的命令打開和關閉！

實際 HTML 程式碼：

<dialog id="my-dialog" open="true">
   <div class="content">
     <form method="dialog">
       <p>Form inside a dialog</p>
       <div>
         <label for="name">Name: </label>
         <input type="text" id="name" name="name" />
       </div>
       <menu>
         <button type="submit">Submit</button>
         <button type="button" onclick="closeDialog()">Cancel</button>
       </menu>
     </form>
   </div>
</dialog>
<button class="open-btn" onclick="showDialog()">Open Dialog</button>

說明：

1. 我們已將 closeDialog() 附加到「取消」按鈕。
2. 「開啟」按鈕使用 showDialog() 開啟對話方塊。

現在，我知道您在想什麼：「但是如果使用者在表單外部（在背景上）點擊怎麼辦？」別擔心——我會支持你的！

點選背景時關閉對話框：

dialog.addEventListener("click", function (event) {
     if (event.target === dialog) {
       closeDialog();
     }
});

說明：我們為對話方塊本身新增了事件偵聽器，如果按一下背景，該事件偵聽器將關閉對話方塊。內容 div 是我們的保障－如果您按一下內部，對話方塊將保持不變。但是點擊外面呢？噗！不見了。

是時候設計對話框的樣式了：

這裡有一些基本的樣式可以讓你的對話框變得生動活潑。我們還將為時尚的模態外觀添加一些背景透明度，這樣它就不會掩蓋周圍的一切。 ”

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#root {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
}

#my-dialog {
  top: 50%;
  left: 50%;
  width: 60vw;
  position: absolute;
  border-radius: 10px;
  transform: translate(-50%, -50%);
}

#my-dialog .content {
  padding: 28px;
}

#my-dialog .content form {
  gap: 16px;
  display: flex;
  flex-direction: column;
}

dialog::backdrop {
  opacity: 0.5;
  background-color: #898989;
}

.open-btn {
  padding: 5px 10px;
}

親自嘗試！ ？

想要查看實際的對話框嗎？查看此代碼沙箱：

？點這裡打開代碼沙箱！

您可以嘗試程式碼、調整它，並現場觀看奇蹟的發生。 ?✨

結論：

就是這樣！您現在已經掌握了 HTML5 元素。無論您想建立彈出視窗、提示還是完整表單，標籤都是您最好的新朋友。

但是在開始之前，這裡有一個專業提示：您應該為整個專案建立一個可重複使用的對話方塊元件。

嘿，如果這篇文章讓您的生活更輕鬆，請不要忘記按讚、分享並表達一些愛。

編碼愉快！

以上是掌握 HTMLlt;dialog> 元素：模態框的本機解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！