<dialog>

基本用法

<dialog>标签表示一个可以关闭的对话框。

  1. <dialog>
  2.   Hello world
  3. </dialog>

上面就是一个最简单的对话框。

默认情况下，对话框是隐藏的，不会在网页上显示。如果要让对话框显示，必须加上open属性。

  1. <dialog open>
  2.   Hello world
  3. </dialog>

上面代码会在网页显示一个方框，内容是Hello world。

<dialog>元素里面，可以放入其他 HTML 元素。

  1. <dialog open>
  2.   <form method="dialog">
  3.     <input type="text">
  4.     <button type="submit" value="foo">提交</button>
  5.   </form>
  6. </dialog>

上面的对话框里面，有一个输入框和提交按钮。

注意，上例中<form>的method属性设为dialog，这时点击提交按钮，对话框就会消失。但是，表单不会提交到服务器，浏览器会将表单元素的returnValue属性设为 Submit 按钮的value属性（上例是foo）。

JavaScript API

<dialog>元素的 JavaScript API 提供Dialog.showModal()和Dialog.close()两个方法，用于打开/关闭对话框。

  1. const modal = document.querySelector('dialog');
  3. // 对话框显示，相当于增加 open 属性
  4. modal.showModal();
  6. // 对话框关闭，相当于移除 open 属性
  7. modal.close();

开发者可以提供关闭按钮，让其调用Dialog.close()方法，关闭对话框。

Dialog.close()方法可以接受一个字符串作为参数，用于传递信息。<dialog>接口的returnValue属性可以读取这个字符串，否则returnValue属性等于提交按钮的value属性。

  1. modal.close('Accepted');
  2. modal.returnValue // "Accepted"

Dialog.showModal()方法唤起对话框时，会有一个透明层，阻止用户与对话框外部的内容互动。CSS 提供了一个 Dialog 元素的::backdrop伪类，用于选中这个透明层，因此可以编写样式让透明层变得可见。

  1. dialog {
  2.   padding: 0;
  3.   border: 0;
  4.   border-radius: 0.6rem;
  5.   box-shadow: 0 0 1em black;
  6. }
  8. dialog::backdrop {
  9.   /* make the backdrop a semi-transparent black */
  10.   background-color: rgba(0, 0, 0, 0.4);
  11. }

上面代码不仅为<dialog>指定了样式，还将对话框的透明层变成了灰色透明。

<dialog>元素还有一个Dialog.show()方法，也能唤起对话框，但是没有透明层，用户可以与对话框外部的内容互动。

事件

<dialog>元素有两个事件，可以监听。

  • close：对话框关闭时触发
  • cancel：用户按下esc键关闭对话框时触发

如果希望用户点击透明层，就关闭对话框，可以用下面的代码。

  1. modal.addEventListener('click', (event) => {
  2.   if (event.target === modal) {
  3.     modal.close('cancelled');
  4.   }
  5. });