偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

新的 HTML dialog 標(biāo)簽:絕對改變游戲規(guī)則

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

有了新的 <dialog> 標(biāo)記,前端開發(fā)將從此不同...

?之前:

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

這還只是用于對話框功能的 CSS,它看起來仍然非?;荆?/span>

但是,使用新的 <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() 方法來顯示非模式對話框--沒有背景,干擾較少:

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

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

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

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

但是,即使它們再常見,我們也不得不借助第三方庫或創(chuàng)建自定義組件來使用它們。

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

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

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

自動打開對話框

open 屬性使對話框從打開頁面的那一刻起就一直處于打開狀態(tài):

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

自動關(guān)閉按鈕

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

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

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

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

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

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

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

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

主要元素的樣式簡單明了:

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

最后

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

責(zé)任編輯:姜華 來源: 大遷世界
相關(guān)推薦

2024-07-19 08:13:00

2024-09-20 08:36:22

2025-04-07 00:00:00

OpenAIGPT-4o圖像

2025-03-26 08:10:56

2025-04-24 08:11:08

2012-10-25 13:46:42

2023-05-11 14:07:29

2019-07-25 06:49:26

2021-10-15 11:28:06

物聯(lián)網(wǎng)邊緣計算IoT

2024-10-12 08:35:32

2013-08-14 10:43:37

2024-02-23 16:12:47

2020-08-19 09:45:10

IBMAIOps混合多云管理

2023-08-04 08:00:00

ControlNet醫(yī)學(xué)圖像

2011-12-28 21:12:10

移動支付

2020-11-19 17:36:10

IT 運(yùn)營

2023-06-02 10:36:59

2025-04-21 08:10:39

2021-01-28 12:37:40

物聯(lián)網(wǎng)體育行業(yè)IOT

2022-09-30 14:32:23

人工智能數(shù)據(jù)隱私游戲規(guī)則
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號