HTML 5.2 正式成为 W3C 的推荐标准（REC）,其中，推出了一个新的原生模态对话框元素 ，乍一看，可能感觉它就是一个新增的元素，然而，作者最近在玩的时候，发现它确实是一个值得期待和很有意思的元素
不到一个月前，HTML 5.2 正式成为 W3C 的推荐标准（REC）,其中，推出了一个新的原生模态对话框元素 <dialog>，乍一看，可能感觉它就是一个新增的元素，然而，作者最近在玩的时候，发现它确实是一个值得期待和很有意思的元素，在这里分享给大家
<dialog open>
Native dialog box!
</dialog>
基本操作
const modal = document.querySelector('dialog');
// makes modal appear (adds `open` attribute)
modal.showModal();
// hides modal (removes `open` attribute)
modal.close();
浏览器支持和 Polyfill
dialogPolyfill.registerDialog(dialog);
样式
dialog {
padding: 0;
width: 478px;
text-align: center;
vertical-align: middle;
border-radius: 5px;
border: 0;
}
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.1);
}
dialog + .backdrop {
background-color: rgba(0, 0, 0, 0.4);
}
<dialog id="sweet-modal">
<h3 class="modal-header">sweet dialog</h3>
<div class="modal-body">
<p>This is a sweet dialog, which is much better.</p>
</div>
<footer class="modal-footer">
<button id="get-it" type="button">Get</button>
</footer>
</dialog>
进阶操作
modal.close('Accepted');
console.log(modal.returnValue); // logs `Accepted`
modal.addEventListener('click', (event) => {
if (event.target === modal) {
modal.close('cancelled');
}
});
原文地址：Meet the New Dialog Element
作者：Keith 翻译来源：https://www.jianshu.com/p/7987712c50d4
服务热线 19970861797
