HTML5新元素dialog

dialog是html5.2新增的元素，功能就是常见的对话框功能，基本情况下不需要额外编写对话框组件。

基本使用：
调用dialog元素的close()和open()方法实现对话框的打开和关闭，showModal可以打开模态框

为dialog元素绑定close事件监听，当对话框关闭会触发此事件。

<dialog id='myDialog'>
  <p>
    hello dialog
  </p>
</dialog>
<button id='openBtn'>Open dialog</button>
<button id='closeBtn'>Close dialog</button>

<script>
var openBtn = document.querySelector('#openBtn');
var closeBtn = document.querySelector('#closeBtn');
var dialog = document.querySelector('#myDialog')
openBtn.addEventListener('click', function(){
    dialog.show();
})

closeBtn.addEventListener('click', function(){
    dialog.close();
})
</script>

示例地址: https://jsfiddle.net/justforuse/tp05Lu4o/11/

可以自定义模态框遮罩层样式:

<style>
    dialog::backdrop {
        background-color: red;
        opacity: 0.1;
    }
</style>

可以自定义对话框关闭携带的参数值

innerCloseBtn.onclick = function(){

    dialog.close(input.value);
}


dialog.addEventListener('close', function(e){
    alert('you say ' + e.target.returnValue);
})

对于dialog内部的form元素，需设置method="dialog"可默认阻止页面跳转，此时dialog的close事件returnValue为submit元素的value值

参考：https://developers.google.com/web/updates/2013/09/dialog-element-Modals-made-easy
https://stackoverflow.com/questions/25864259/how-to-close-the-new-html-dialog-tag-by-clicking-on-its-backdrop?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

兼容性较差，目前只有chrome支持