14. HTML标签<dialog>、<details>

1. <dialog> 对话框

1.1 <dialog>元素基本用法

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

<dialog>
  Hello world
</dialog>

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

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

  <dialog open>
    Hello world
  </dialog>
  

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

  

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

  <dialog open>
    <form method="dialog">
      <input type="text">
      <button type="submit" value="foo">提交</button>
    </form>
  </dialog>
  

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

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

  

1.2 <dialog>元素JavaScript API

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

const modal = document.querySelector('dialog');

// 对话框显示，相当于增加 open 属性
modal.showModal();

// 对话框关闭，相当于移除 open 属性
modal.close();

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

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

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

  

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

  dialog {
    padding: 0;
    border: 0;
    border-radius: 0.6rem;
    box-shadow: 0 0 1em black;
  }
  
  dialog::backdrop {
    /* make the backdrop a semi-transparent black */
    background-color: rgba(0, 0, 0, 0.4);
  }
  

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

  

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

1.3 <dialog>元素的事件

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

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

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

modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.close('cancelled');
  }
});

2.<details>折叠内容，<summary>折叠内容的标题

2.1 基本用法

• <details>标签用来折叠内容，浏览器会折叠显示该标签的内容。

  <details>
  这是一段解释文本。
  </details>
  

  上面的代码在浏览器里面，会折叠起来，显示Details，前面有一个三角形，就像下面这样。

  ▶ Details
  

  用户点击这段文本，折叠的文本就会展开，显示详细内容。

  ▼ Details
  这是一段解释文本。
  

  再点击一下，展开的文本又会重新折叠起来。

  

• <details>标签的open属性，用于默认打开折叠。

  <details open>
  这是一段解释文本。
  </details>
  

  上面代码默认打开折叠。

• <summary>标签用来定制折叠内容的标题。

  <details>
    <summary>这是标题</summary>
    这是一段解释文本。
  </details>
  

  上面的代码显示结果如下。

  ▶ 这是标题
  

  点击后，展示的效果如下。

  ▼ 这是标题
  这是一段解释文本。
  

  

• 通过 CSS 设置summary::-webkit-details-marker，可以改变标题前面的三角箭头。

  summary::-webkit-details-marker {
    background: url(https://example.com/foo.svg);
    color: transparent;
  }
  

• 下面的样式是另一种替换箭头的方法。

  summary::-webkit-details-marker {
    display: none;
  }
  summary:before {
    content: "\2714";
    color: #696f7c;
    margin-right: 5px;
  }
  

  

2.2 <details>的JavaScript API

Details元素的open属性返回<details>当前是打开还是关闭。

const details = document.querySelector('details');

if (detail.open === true) {
  // 展开状态
} else {
  // 折叠状态
}

Details元素有一个toggle事件，打开或关闭折叠时，都会触发这个事件。

details.addEventListener('toggle', event => {
  if (details.open) {
    /* 展开状况 */
  } else {
    /* 折叠状态 */
  }
});