狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

❌之前：

看看我創(chuàng)建一個(gè)對(duì)話框要花費(fèi)多少功夫👇。僅 CSS 就有近 20 行：

這還只是用于對(duì)話框功能的 CSS，它看起來(lái)仍然非常基本：

但是，使用新的 <dialog> 標(biāo)簽又如何呢？

✅ 現(xiàn)在：

<button id="open">Open</button>
<dialog id="dialog">
  ⚡ Lighting strikes the earth 44 times every second!
  ⚡ 閃電每秒擊中地球44次！
</dialog>

JS:

const dialog = document.getElementById('dialog');
const open = document.getElementById('open');

open.addEventListener('click', () => {
  dialog.showModal();
});

我們甚至可以使用 show() 方法來(lái)顯示非模式對(duì)話框--沒(méi)有背景，干擾較少：

const dialog = document.getElementById('dialog');
const open = document.getElementById('open');

open.addEventListener('click', () => {
  // ✅ show() 方法
  dialog.show();
});

對(duì)話框一直是強(qiáng)力吸引用戶注意力并向其傳遞信息的有力方式。

從 Material Design 到 Fluent Design，它一直是每個(gè)用戶界面設(shè)計(jì)系統(tǒng)的主打功能。

但是，即使它們?cè)俪Ｒ?jiàn)，我們也不得不借助第三方庫(kù)或創(chuàng)建自定義組件來(lái)使用它們。

其中許多圖書(shū)館甚至沒(méi)有遵循關(guān)于可用性和可訪問(wèn)性的官方建議......

例如：按 Escape 鍵應(yīng)該可以解除頁(yè)面上的對(duì)話框，但許多自定義對(duì)話框都不會(huì)這樣做。

因此， <dialog> 改變了這一切。

自動(dòng)打開(kāi)對(duì)話框

open 屬性使對(duì)話框從打開(kāi)頁(yè)面的那一刻起就一直處于打開(kāi)狀態(tài)：

<dialog id="dialog" open>
  長(zhǎng)頸鹿比人類(lèi)更有可能被閃電擊中。事實(shí)上，它們的可能性是人類(lèi)的30倍。
</dialog>

自動(dòng)關(guān)閉按鈕

是的，可以使用標(biāo)準(zhǔn)事件偵聽(tīng)器和 close() 方法添加關(guān)閉功能：

const close = document.querySelector('#dialog .close');

close.addEventListener('click', () => {
  dialog.close();
});

但是內(nèi)置的 <dialog> 可以讓這一切變得更加簡(jiǎn)單--無(wú)需 JavaScript：

<dialog id="dialog">
  ⚡ 在 codingbeautydev.com 獲取基本的編碼技能和知識(shí)
  <br />
  <form method="dialog">
    <button class="close">關(guān)閉</button>
  </form>
</dialog>

如何正確設(shè)計(jì) <dialog> 樣式

<dialog> 有一個(gè)特殊的 ::backdrop 偽元素，用于設(shè)計(jì)背景墻的樣式：

::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}

主要元素的樣式簡(jiǎn)單明了：

dialog {
  background-color: black;
  color: white;
}

最后

有了新的 HTML <dialog> 標(biāo)記，在我們的網(wǎng)絡(luò)應(yīng)用程序中創(chuàng)建模式和對(duì)話框變得前所未有的簡(jiǎn)單和快捷。