html的dialog标签元素

以前的时候为了在页面上做出dialog效果往往很复杂，还要写遮罩层，用CSS 写 好多代码，不过刚刚知道html中原生也支持dialog。

标准用法

	

    
你好
    

可以通过改变open属性，来显示或者隐藏，如上图所示。也可以使用dialog的show方法或者close方法。

模态框(modal)用法

与普通用法不同的是，显示需要使用showModal方法，而模态框默认上下左右居中，还有默认的蒙层。当模态框显示的时候，可以按ESC键进行隐藏。

修改样式

背景的样式可以通过::backdrop伪类进行修改，如上图把背景色修改成了蓝色；当然模态框的样式也可以同过CSS修改。

form形式的模态框

实现

    

        
要关闭？
        否
        是
    

效果如下图：

其中，form的method属性要设置成dialog，里面两个button ,点击任何一个都会将dialog隐藏，close事件中的returnValue就是button的value，不限于no or yes;

参考文献：
https://www.viget.com/articles/the-dialog-element/