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

沒(méi)有？！讓我們來(lái)了解一下

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

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

模態(tài)：

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

對(duì)話：

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

主要區(qū)別：

• 互動(dòng)屏蔽:

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

• 用例：

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

---

HTML 中的對(duì)話框元素簡(jiǎn)介

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

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

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

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

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

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

但是，不建議直接使用 open 屬性，因?yàn)檫@會(huì)創(chuàng)建非模式對(duì)話框。相反，您應(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() 方法打開(kāi)一個(gè)模態(tài)對(duì)話框，而 show() 打開(kāi)一個(gè)非模態(tài)對(duì)話框（一種彈出窗口）。

關(guān)閉對(duì)話框

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

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

自動(dòng)輔助功能

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

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

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

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è)計(jì)的自定義模式。

對(duì)話框元素的高級(jí)功能

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

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

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

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

• 點(diǎn)擊即可關(guān)閉 盡管本身沒(méi)有這種行為，很容易添加一個(gè)單擊事件偵聽(tīng)器來(lái)在用戶單擊離開(kāi)對(duì)話框時(shí)關(guān)閉對(duì)話框。這是一個(gè)實(shí)現(xiàn)此功能的簡(jiǎn)單示例：

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

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

---

結(jié)論

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

此外，使用 CSS 設(shè)置對(duì)話框及其背景樣式的能力使其更加可定制。只需一些附加功能，例如在單擊時(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)與對(duì)話框的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！