模態與對話框

你知道模態和對話框的差別嗎？

沒有？ ！讓我們來了解一下

模態和對話框之間的區別

在使用者介面 (UI) 設計中，術語「模態」和「對話方塊」經常互換使用，但它們具有不同的含義：

模態：

• 定義：模態是一種使用者介面元素，它在應用程式中創建臨時的中斷狀態，要求使用者與其互動才能返回到底層內容或應用程式。
• 主要功能：阻止與介面其餘部分的交互，直到關閉或與之交互。強制使用者專注於模式的內容並採取行動（例如確認決定或填寫表格）。
• 常見用例：
  • 確認請求（例如「您確定要刪除此內容嗎？」）
  • 警報或錯誤訊息
  • 驗證畫面（例如登入畫面）
  • 在繼續之前選擇基本選項（例如「儲存變更？」）
• 範例：「儲存變更？」在許多應用程式中，您必須按一下「是」、「否」或「取消」才能繼續其他任務。

對話：

• 定義：「對話框」是一個更廣泛的術語，指任何允許與使用者互動的使用者介面元素，通常涉及交換資訊或做出決策。它可能是也可能不是模態的。
• 主要功能：不一定會阻止與介面其餘部分的互動。對話方塊可以是模態的，但也可以是非模態的，即使用者可以在對話方塊開啟時繼續與應用程式的其他部分進行互動。
• 常見用例：
  • 請求使用者輸入（例如搜尋對話框或設定）
  • 訊息顯示（例如錯誤訊息、警報）
  • 複雜的表格或多步驟的流程
• 範例：文字處理器中的對話框，要求特定參數（例如字體大小或格式），但如果它是非模式對話框，則允許您與應用程式的其他元素進行互動。

主要區別：

• 互動屏蔽:

  • 模式會阻止與主介面的交互，直到它被關閉。
  • 對話可能會也可能不會阻止互動；這取決於它是模態對話框還是非模態對話框。

• 用例：

  • 模態框用於關鍵決策、警報或操作，要求使用者在繼續之前先專注於模態框的內容。
  • 對話框可用於各種交互，包括顯示資訊、提交表單或選擇選項，無論是否阻塞主介面。

---

HTML 中的對話方塊元素簡介

HTML 提供了一種簡單而有效的方法來建立模式和對話框。該元素非常靈活，除了提供開箱即用的可訪問性優勢之外，還允許您自訂內容和樣式。讓我們探討一下它的工作原理以及如何使用它在網頁上創建有效的模式。

基本結構

它非常簡單：它只是一個帶有可選屬性和一些關聯 JavaScript 方法的 HTML 標記。查看基本使用範例：

<dialog>
  <!-- Conteúdo do Dialog -->
</dialog>

預設情況下，對話框是隱藏的。要顯示它，可以新增 open 屬性，但建議使用 JavaScript show() 和 showModal() 方法來控制對話方塊的開啟：

<dialog open>
  <span>Você pode me ver agora!</span>
</dialog>

但是，不建議直接使用 open 屬性，因為這會建立非模式對話方塊。相反，您應該使用 JavaScript 方法：

const dialog = document.querySelector("dialog");
dialog.show(); // Abre um diálogo não-modal
dialog.showModal(); // Abre um diálogo modal

showModal() 方法開啟一個模態對話框，而 show() 開啟一個非模態對話框（一種彈出視窗）。

關閉對話框

要關閉對話框，可以使用 close() 方法。此外，如果對話方塊是模態的，可以按 Esc 鍵關閉它：

const dialog = document.querySelector("dialog");
dialog.close(); // Fecha o diálogo

自動輔助使用

的一大優點是它自動處理輔助功能。它應用正確的 aria 屬性並管理焦點，從而更輕鬆地創建可訪問的應用程式。

設定對話框元素的樣式

儘管它已經附帶了瀏覽器應用的一些預設樣式，很容易對其進行自訂。以下是使用一些基本 CSS 屬性來設定樣式的對話框範例：

dialog {
  z-index: 10;
  margin-top: 10px;
  background: green;
  border: none;
  border-radius: 1rem;
}

此外，您可以使用 ::backdrop 偽元素設定模式背景的樣式。要修改背景（模態後面的區域），您可以套用以下 CSS：

<dialog>
  <!-- Conteúdo do Dialog -->
</dialog>

這可以輕鬆創建適合您網站設計的自訂模式。

對話框元素的進階功能

• 對話框中的表單 您可以在對話方塊中使用表單。如果在表單上設定method=「dialog」屬性，則提交表單時對話方塊將自動關閉，而不實際將表單資料傳送到伺服器。最有趣的是，當您重新開啟對話方塊時，表單資料仍然存在。

<dialog open>
  <span>Você pode me ver agora!</span>
</dialog>

• 取消按鈕 您可以使用 formmethod="dialog" 屬性為表單新增一個取消按鈕，以關閉對話方塊而不提交表單：

const dialog = document.querySelector("dialog");
dialog.show(); // Abre um diálogo não-modal
dialog.showModal(); // Abre um diálogo modal

• 點擊即可關閉 儘管本身沒有這種行為，很容易添加一個單擊事件偵聽器來在使用者單擊離開對話框時關閉對話框。這是一個實現此功能的簡單範例：

const dialog = document.querySelector("dialog");
dialog.close(); // Fecha o diálogo

此解決方案允許在模態區域外部單擊時關閉對話框，這是許多模態中的常見行為。

---

結論

HTML 提供了一種簡單而強大的方法來實現模式和對話框，並專注於可訪問性。它可以輕鬆創建自訂模式，無需外部庫或複雜的配置。使用 show()、showModal() 和 close() 等方法，您可以輕鬆控制對話方塊的行為。

此外，使用 CSS 設定對話框及其背景樣式的能力使其更加可自訂。只需一些附加功能，例如在單擊時關閉模式或整合表單，

就可以滿足您的需求。成為在您的網站上創建互動元素的高度靈活且有用的工具。

---

更多資訊和範例：https://blog.webdevsimplified.com/2023-04/html-dialog/
https://dev.to/iam_timsmith/dialogs-vs-modals-is-there-a-difference-210k

以上是模態與對話框的詳細內容。更多資訊請關注PHP中文網其他相關文章！