HTML中的dialog元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/12/09/HTML%E4%B8%AD%E7%9A%84dialog%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

语义
attribute
property
method
event
polyfill

正文

语义

对话框

示例：

learn_dialog/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
    <script defer src="./js/index.js"></script>
  </head>
  <body>
    <button id="show">Show</button>
    <button id="showModal">ShowModal</button>
    <dialog id="foo">
      <h1>hello, world</h1>
      <form method="dialog">
        <button type="submit" value="bar">Close</button>
      </form>
    </dialog>
  </body>
</html>

learn_dialog/css/index.css

#foo {
  background-color: #0f0;
}

#foo::backdrop {
  background-color: #f00;
}

learn_dialog/js/index.js

const show = document.querySelector('#show');
const showModal = document.querySelector('#showModal');
const foo = document.querySelector('#foo');

show.addEventListener('click', function () {
  foo.show();
});
showModal.addEventListener('click', function () {
  foo.showModal();
});
foo.addEventListener('close', function (event) {
  console.log(this.returnValue);
});