html_dialog

初识Dialog

HTML5新推出的Dialog，感觉就和之前废弃的marquee差不多，下面就是它的一个基本例子

<dialog>
        <div style="width:300px;height:200px;">我是新版的Dialog</div>
    </dialog>

Dialog基础方法

let MyDialog = document.getElementsByTagName('dialog')[0];
    MyDialog.showModal();//展示对话框
    MyDialog.close();//关闭对话框
   其实还有很多，想详细了解，很简单，复制上边代码试一下就可以了

Dialog事件

作为一个DOM元素，基本的事件都可以应用在Modal身上
    let MyDialog = document.getElementsByTagName('dialog')[0];
    MyDialog.onclick = function(){ console.log('我被点击了')};
    MyDialog.onblur = function(){ console.log('我失去了焦点')};
    MyDialog.onclose = function(){ console.log('我被关闭了')};

Dialog样式覆盖

一如我们覆盖默认的滚动条样式一样，我们可以设置其伪元素来达到覆盖样式的目的
    dialog {
        width: 300px;
        height:200px
    }
    dialog::backdrop {
        background-color: #dddddd;
    }

Dialog支持度

Chrhome已经支持了，其他浏览器，应该不久之后也会支持

Dialog支持度，Dialog官方文档