你知道模態(tài)和對話框的區(qū)別嗎？

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

模態(tài)和對話框之間的區(qū)別

在用戶界面 (UI) 設(shè)計中，術(shù)語“模態(tài)”和“對話框”經(jīng)?；Q使用，但它們具有不同的含義：

模態(tài)：

• 定義：模態(tài)是一種用戶界面元素，它在應(yīng)用程序中創(chuàng)建臨時的中斷狀態(tài)，要求用戶與其交互才能返回到底層內(nèi)容或應(yīng)用程序。
• 主要功能：阻止與界面其余部分的交互，直到關(guān)閉或與之交互。強制用戶專注于模式的內(nèi)容并采取行動（例如確認決定或填寫表格）。
• 常見用例：
  • 確認請求（例如“您確定要刪除此內(nèi)容嗎？”）
  • 警報或錯誤消息
  • 身份驗證屏幕（例如登錄屏幕）
  • 在繼續(xù)之前選擇基本選項（例如“保存更改？”）
• 示例：“保存更改？”在許多應(yīng)用程序中，您必須單擊“是”、“否”或“取消”才能繼續(xù)其他任務(wù)。

對話：

• 定義：“對話框”是一個更廣泛的術(shù)語，指任何允許與用戶交互的用戶界面元素，通常涉及交換信息或做出決策。它可能是也可能不是模態(tài)的。
• 主要功能：不一定會阻止與界面其余部分的交互。對話框可以是模態(tài)的，但也可以是非模態(tài)的，即用戶可以在對話框打開時繼續(xù)與應(yīng)用程序的其他部分進行交互。
• 常見用例：
  • 請求用戶輸入（例如搜索對話框或設(shè)置）
  • 信息顯示（例如錯誤消息、警報）
  • 復(fù)雜的表格或多步驟的流程
• 示例：文字處理器中的對話框，要求特定參數(shù)（例如字體大小或格式），但如果它是非模式對話框，則允許您與應(yīng)用程序的其他元素進行交互。

主要區(qū)別：

• 互動屏蔽:

  • 模式會阻止與主界面的交互，直到它被關(guān)閉。
  • 對話可能會也可能不會阻止交互；這取決于它是模態(tài)對話框還是非模態(tài)對話框。

• 用例：

  • 模態(tài)框用于關(guān)鍵決策、警報或操作，要求用戶在繼續(xù)之前先關(guān)注模態(tài)框的內(nèi)容。
  • 對話框可用于各種交互，包括顯示信息、提交表單或選擇選項，無論是否阻塞主界面。

---

HTML 中的對話框元素簡介

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

基本結(jié)構(gòu)

它非常簡單：它只是一個帶有可選屬性和一些關(guān)聯(lián) JavaScript 方法的 HTML 標記。查看基本使用示例：

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

默認情況下，對話框是隱藏的。要顯示它，可以添加 open 屬性，但建議使用 JavaScript show() 和 showModal() 方法來控制對話框的打開：

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

但是，不建議直接使用 open 屬性，因為這會創(chuàng)建非模式對話框。相反，您應(yīng)該使用 JavaScript 方法：

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

showModal() 方法打開一個模態(tài)對話框，而 show() 打開一個非模態(tài)對話框（一種彈出窗口）。

關(guān)閉對話框

要關(guān)閉對話框，可以使用 close() 方法。此外，如果對話框是模態(tài)的，可以通過按 Esc 鍵關(guān)閉它：

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

自動輔助功能

的一大優(yōu)點是是它自動處理輔助功能。它應(yīng)用正確的 aria 屬性并管理焦點，從而更輕松地創(chuàng)建可訪問的應(yīng)用程序。

設(shè)置對話框元素的樣式

盡管它已經(jīng)附帶了瀏覽器應(yīng)用的一些默認樣式，很容易對其進行自定義。以下是使用一些基本 CSS 屬性設(shè)置樣式的對話框示例：

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

此外，您可以使用 ::backdrop 偽元素設(shè)置模式背景的樣式。要修改背景（模態(tài)后面的區(qū)域），您可以應(yīng)用以下 CSS：

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

這可以輕松創(chuàng)建適合您網(wǎng)站設(shè)計的自定義模式。

對話框元素的高級功能

• 對話框中的表單 您可以在對話框中使用表單。如果在表單上設(shè)置method=“dialog”屬性，則提交表單時對話框?qū)⒆詣雨P(guān)閉，而不實際將表單數(shù)據(jù)發(fā)送到服務(wù)器。最有趣的是，當(dāng)您重新打開對話框時，表單數(shù)據(jù)仍然存在。

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

• 取消按鈕 您可以使用 formmethod="dialog" 屬性向表單添加一個取消按鈕，以關(guān)閉對話框而不提交表單：

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

• 點擊即可關(guān)閉 盡管本身沒有這種行為，很容易添加一個單擊事件偵聽器來在用戶單擊離開對話框時關(guān)閉對話框。這是一個實現(xiàn)此功能的簡單示例：

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

此解決方案允許在模態(tài)區(qū)域外部單擊時關(guān)閉對話框，這是許多模態(tài)中的常見行為。

---

結(jié)論

HTML 提供了一種簡單而強大的方法來實現(xiàn)模式和對話框，并重點關(guān)注可訪問性。它可以輕松創(chuàng)建自定義模式，無需外部庫或復(fù)雜的配置。使用 show()、showModal() 和 close() 等方法，您可以輕松控制對話框的行為。

此外，使用 CSS 設(shè)置對話框及其背景樣式的能力使其更加可定制。只需一些附加功能，例如在單擊時關(guān)閉模式或集成表單，

就可以滿足您的需求。成為在您的網(wǎng)站上創(chuàng)建交互元素的高度靈活且有用的工具。

---

有關(guān)更多信息和示例：https://blog.webdevsimplified.com/2023-04/html-dialog/
https://dev.to/iam_timsmith/dialogs-vs-modals-is-there-a-difference-210k

以上是模態(tài)與對話框的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！