元素：模態框的本機解決方案" />
簡介： Dialog 標籤是在HTML5 中引入的，您知道這意味著什麼，僅此而已被連結到外部解決方案，如用於這些模式和彈出視窗的Bootstrap！透過 HTML5 的原生元素，您可以直接在程式碼中建立對話方塊、提示和彈出視窗。
讓我們在對話方塊標籤內建立一個簡單的表單和一個按鈕，點擊該按鈕將會神奇地開啟該表單。
建立對話框（比您想像的更簡單！）：
說明：我們在其中建立了一個巢狀表單。該表單要求提供名稱（因為命名當然是程式設計中最困難的部分）。我們新增了兩個 CTA，一個用於提交表單，另一個用於取消表單。簡單易行。
讓我們切換對話框的可見性：
預設情況下，對話框是害羞的（即，它們是隱藏的），但不要擔心！只需一點 JavaScript，我們就可以讓它們付諸行動！這是魔法咒語：
說明：我們使用querySelector來選擇我們的對話框。然後，我們編寫兩個函數——一個用於開啟對話框，一個用於關閉對話框。就像那樣 - 對話框根據您的命令打開和關閉！
實際 HTML 程式碼：
說明：
現在，我知道您在想什麼：「但是如果使用者在表單外部（在背景上）點擊怎麼辦？」別擔心——我會支持你的！
點選背景時關閉對話框：
說明：我們為對話方塊本身新增了事件偵聽器，如果按一下背景，該事件偵聽器將關閉對話方塊。內容 div 是我們的保障－如果您按一下內部，對話方塊將保持不變。但是點擊外面呢？噗！不見了。
是時候設計對話框的樣式了：
這裡有一些基本的樣式可以讓你的對話框變得生動活潑。我們還將為時尚的模態外觀添加一些背景透明度，這樣它就不會掩蓋周圍的一切。 ”
親自嘗試！ ？
想要查看實際的對話框嗎？查看此代碼沙箱：
？點這裡打開代碼沙箱！
您可以嘗試程式碼、調整它，並現場觀看奇蹟的發生。 ?✨
結論：
就是這樣！您現在已經掌握了 HTML5 元素。無論您想建立彈出視窗、提示還是完整表單，標籤都是您最好的新朋友。
但是在開始之前，這裡有一個專業提示：您應該為整個專案建立一個可重複使用的對話方塊元件。
嘿，如果這篇文章讓您的生活更輕鬆，請不要忘記按讚、分享並表達一些愛。
編碼愉快！
以上是掌握 HTMLlt;dialog> 元素：模態框的本機解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！
