HTML5dialog有哪些？怎么运用HTML5中的dialog来实现模拟弹窗？-

，和

元素,其中每个都会创立一个新的独立的内容区域，你可以把它作为body的一个孩子，或者是嵌套的元素，如或

——两种元素都有效，如下所示。

默许状况下，支撑的阅读器(Chrome 37+和Opera 27+)会以隐蔽的情势呈现

元素，只要调取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(); 
  });

自定义样式：

像大多数其他的元素同样，对话框可以很容易遮盖阅读器的默许样式。所以，你可以自定义其样式。例如，使对话框边框更薄，使边角圆润，并增加暗影结果等。

此外，当

元素以模态显示时(运用ShowModal()办法)，我们会增加一个额外的伪元素::backdrop。::backdrop元素会立刻驻留在对话框下面，遮盖整个视区和下方的其它元素。

阅读器支撑：

当前，只要 Chrome 和 Safari 6 支撑

标签。

【