HTML5dialog标签怎么使用,你有使用过HTML5的dialog标签吗？说说看，它有什么特点？...

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'

});

代码可以直接复制到这里在线运行调试