新的 HTML dialog 標(biāo)簽：絕對改變游戲規(guī)則
作者：dev
有了新的 HTML <dialog> 標(biāo)記，在我們的網(wǎng)絡(luò)應(yīng)用程序中創(chuàng)建模式和對話框變得前所未有的簡單和快捷。
有了新的 <dialog> 標(biāo)記，前端開發(fā)將從此不同...
?之前：
看看我創(chuàng)建一個對話框要花費(fèi)多少功夫??。僅 CSS 就有近 20 行：
這還只是用于對話框功能的 CSS，它看起來仍然非常基本：
但是，使用新的 <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é)任編輯：姜華
來源：
大遷世界
