模拟 Element ui 的 Dialog

最新推荐文章于 2024-05-08 15:03:49 发布

Alan Lu Pop

最新推荐文章于 2024-05-08 15:03:49 发布

阅读量368

点赞数 11

文章标签： css elementui 前端

本文链接：https://blog.csdn.net/paopao_pop/article/details/136058196

版权

最近发现了一个新标签，dialog 正好尝试一下模拟 Element 的 Dialog，代码见下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Dialog</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      #dialog {
        margin: auto;
        padding: 20px;
        background-color: aquamarine;
        transition: opacity 0.5s ease, transform 1s ease;
      }

      #dialog .title {
        display: block;
      }

      #dialog::backdrop {
        background-color: aqua;
        transition: background-color 0.5s ease;
      }

      #dialog[data-close] {
        opacity: 0;
        transform: perspective(1000px) rotateX(45deg) translateY(-100px);
        /* transform: translate3d(0,-100px,1000px); */
      }

      #dialog[data-close]::backdrop {
        background-color: transparent;
      }
    </style>
  </head>
  <body>
    <div>
      <button onclick="openDialog()">Open</button>
    </div>
    <div>
      <dialog id="dialog">
        <title class="title">Title</title>
        <input
          type="text"
          value="Test"
        />
        <input
          type="button"
          value="Submit"
          onclick="submit()"
        />
      </dialog>
    </div>
  </body>

  <script>
    const dialog = document.getElementById("dialog");

    // const openDialog = () => {
    //   dialog.showModal();
    // };
    // const submit = () => {
    //   dialog.close();
    // };

    const init = () => {
      dialog.showModal();
      dialog.addEventListener("transitionend", (e) => {
        const name = e.propertyName;
        if (dialog.hasAttribute("data-close") && name === "transform") {
          dialog.close();
        }
      });
    };

    const submit = () => {
      dialog.setAttribute("data-close", true);
    };

    const openDialog = () => {
      dialog.showModal();
      dialog.removeAttribute("data-close");
    };

    init();
  </script>
</html>

本来还想看看能不能直接全部 Css 处理，我还是太菜了，只能借助于 Js 实现了部分效果

这个 dialog 标签还是很强的

<dialog>：对话框元素 - HTML（超文本标记语言） | MDN

所以特殊场景可以用自己写的 Dialog 来实现某些效果，今天就这样。

祝大家春节开心，天天快乐，拜拜！

Alan Lu Pop

关注

11
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
模拟 Element ui 的 Dialog

最近发现了一个新标签，dialog 正好尝试一下模拟 Element 的 Dialog，代码见下。本来还想看看能不能直接全部 Css 处理，我还是太菜了，只能借助于 Js 实现了部分效果。所以特殊场景可以用自己写的 Dialog 来实现某些效果，今天就这样。这个 dialog 标签还是很强的。祝大家春节开心，天天快乐，拜拜！
复制链接

扫一扫