HTML5 dialog是什么？怎么使用HTML5中的dialog来实现模拟弹窗？(2)-木庄网络博客

open ：open规定 dialog 元素是有效的，用户可以与它进行交互。

近期,网页上的的许多流程都需要用户完全同意才可以完成。例如，用户可能需要删除帐户，更改他们的用户名，或确认货币交易。

这种情况下，常用的用户体验(UX,User experience design)是显示一个具有两个按钮的对话框。一个是取消，一个是继续。这么多年，我们一直依靠JavaScript库实现此效果，但在本篇文章中，我们要用<dialog>元素实现此效果。

使用dialog元素：

<dialog>是一个HTML5(精确来说是5.1)元素。它归类为“切片根”，类似<body>，<blockquote>，和<details>元素,其中每个都会建立一个新的独立的内容区域，你可以把它作为body的一个孩子，或者是嵌套的元素，如<div>或<section>――两种元素都有效，如下所示。

<body>
      <div> 
            <dialog></dialog>
      </div> 
      <section> 
            <dialog></dialog> 
      </section>
            <dialog></dialog>
</body>

默认情况下，支持的浏览器(Chrome 37+和Opera 27+)会以隐藏的形式呈现<dialog>元素，只有调用JavaScript的show()或showModal()方法才可以显现，调用close()方法再次将其隐藏。通常情况下，我们会在一个click事件上执行此方法，如下所示：

var $accountDelete = $('#delete-account'), 
      $accountDeleteDialog = $('#confirm-delete'); 
  $accountDelete.on('click', function() { 
      $accountDeleteDialog[0].showModal(); 
  }); 
  $('#cancel').on('click', function() {
      $accountDeleteDialog[0].close(); 
  });