dialog是html5.2的規範，浏覽器相容性比較差，常用的特性就這些，具體可以看看這裡
Document
dialog {
border-color: red;
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.3);
}
TEST
12
close
var dialogEl = document.querySelector('#dialog');
var btnEl = document.querySelector('#btn');
var closeEl = document.querySelector('#close');
btnEl.addEventListener('click', e => {
// dialogEl.show(); // 打開dialog
dialogEl.showModal(); // 打開dialog，有蒙版
});
closeEl.addEventListener('click', e => {
dialogEl.close('testValue');
console.log(dialogEl.returnValue) // 'testValue'
});
dialogEl.addEventListener('close', e => {
console.log('close event')
});
dialogEl.addEventListener('cancel', e => {
// 按下ESC同時也會觸發close事件
console.log('enter ESC key event')
// 以下可選代碼
dialogEl.close('testValue2'); //
console.log(e.target.returnValue); // 'testValue2'
});
代碼可以直接複制到這裡線上運作調試