新的 HTML dialog 標(biāo)簽：絕對(duì)改變游戲規(guī)則
有了新的 <dialog> 標(biāo)記，前端開(kāi)發(fā)將從此不同...
?之前：
看看我創(chuàng)建一個(gè)對(duì)話框要花費(fèi)多少功夫??。僅 CSS 就有近 20 行：
這還只是用于對(duì)話框功能的 CSS，它看起來(lái)仍然非?；荆?/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() 方法來(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)使用它們。
其中許多圖書館甚至沒(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)頸鹿比人類更有可能被閃電擊中。事實(shí)上，它們的可能性是人類的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)單和快捷。
