16 November 2013

运行条件

chrome版本>31,在地址栏输入chrome://flagsEnable experimental Web Platform features(打开启用实验性网络平台功能)

<style>
dialog {
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
dialog::backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>
<dialog>
    <p>This is da dialog!</p>
    <button id="close">Close</button>
</dialog>
<button id="show">Open Dialog!</button>
<script>
    var dialog = document.querySelector('dialog');
    document.querySelector('#show').onclick = function() {
        dialog.showModal();
        //dialog.show();
    };
    document.querySelector('#close').onclick = function() {
        dialog.close();
    };
</script>
  • dialog.show()显示dialog
  • dialog.close()关闭dialog
  • dialog.showModal()会显示灰色遮罩
  • dialog.show()仅显示dialog