探索 HTML 元素：

演示版

介绍

对话框元素已经得到所有浏览器的广泛支持一段时间了，我在这里向您展示这个元素如何能够极大地提高代码的生产力和质量，无论您使用什么框架。

我使用纯 JavaScript 来演示您不需要很多行代码来创建美观且简单的组件。
使用这个元素非常简单：

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

如上所示，您只需获取对话框元素的引用并调用以下两个函数之一：

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

但是您可能想知道：

这两个函数有什么区别？

嗯，要理解这一点，我们必须了解一些关于层以及顶层是什么的知识。

层数

让我给你举一个你以前在使用抽屉组件时可能遇到过的例子。您通常在 html 中调用该组件，但它最终不会在整个屏幕上打开，只能在您放置它的上下文中打开，因此您最终必须将抽屉放在 index.html 中才能在整个视口中打开或填充你的 css 带有位置和 z-index 来创建重叠的上下文。

通过使用图层，你可以让这件事变得更容易，但你最终也会污染你的 css 文档。通过使用 showModal()，它可以使用单独的上下文在顶层打开对话框元素，无需任何配置。如果您使用 show()，它不会调用顶层中的对话框，并且您可以拥有视口的正常行为。

顶层是一个“图层”，它扩展到整个视口并覆盖您或您的网络浏览器创建的所有图层。它有很大帮助，并避免了臭名昭著的过度钻探。

好吧好吧，但是我该如何设计这个元素的样式呢？一定很难吧！

一点也不！就像将 div 居中一样简单...也许更多一点！

对话框/模态框

要了解更深入的风格化，我建议您观看 Kevin Powell 的这段视频。

要设置对话框样式很简单，只需将 id/class 放入元素中并使用 CSS。

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

正如你在上面看到的，我使用#dialog[open]来修改元素的位置。当您创建对话框时，默认情况下会禁用显示。

仅当您调用这两个函数之一时才会添加此属性。
因此，在设计任何对话框元素的样式时，请始终尝试使用类/id 的名称和属性以避免显示问题。
正如你在上面看到的，对话框已经带有::backdrop效果，并且修改它也非常简单。

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

表演！超级简单！但我该如何关闭这个模式呢？当我点击背景时没有任何反应！

我们走吧！默认情况下，该元素不具备这种可能性。如果你想关闭模式，你必须使用内部按钮或类似的东西调用函数来关闭它。

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

但是如果您想通过单击外部来复制这种关闭效果，您可以使用一个简单的函数来识别对话框元素的边缘，以了解您是否单击了外部。

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

行为如下：

如果您想经常这样做，我建议您查看 Popover API。

哥们儿，太丑了！我的图书馆已经动画化了！

不用担心！让我们添加一个简单的淡入动画。

#dialog[open]::backdrop {
  background: rgba(255, 0, 0, 60%);
}

添加淡出动画有点困难，因为您无法识别用户何时关闭模式，因此我们必须更改脚本文件。

dialog.close();

完成了两件重要的事情：

1. 添加了一个新参数来确定关闭模式的动画持续时间（经过一番搜索，我找到了 Kevin Powell 的这段视频）。

2. 我添加了一个名为“用户点击时关闭”的属性。使用上面提到的时间参数将其删除。
   

/** @type {HTMLDialogElement} */
const dialog = document.getElementById('dialog');

/**
 * Adds a close behavior to clicking outside dialog element
 * @param {HTMLDialogElement} dialogRef - The refer to element Dialog.
 * @example
 * const dialog = document.querySelector('#dialog');
 * closeDialogClickingOutside(dialog)
 */
 const closeByClickingOutside = (dialogRef) => {
  dialogRef.addEventListener('click', (ev) => {
    if (
      ev.offsetX < 0 ||
      ev.offsetX > ev.target.offsetWidth ||
      ev.offsetY < 0 ||
      ev.offsetY > ev.target.offsetHeight
    ) {
      dialogRef.close();
    }
  });
};

closeByClickingOutside(dialog);

我们有了完全动画的对话框，无需任何库！

真好！但是你是如何使用这个元素制作抽屉的呢？

好吧，为了实现这一点，我们必须采用对话框元素的默认样式并覆盖它们......

抽屉

抽屉在屏幕上方全高度打开。那么让我们从头开始制作一个新的抽屉元素。

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

需要注意的是，要将抽屉设置为屏幕的整个高度，您必须覆盖对话框的默认最大高度！

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

现在很简单：只需使用您在分步对话框中创建的相同函数添加动画即可完成！

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

#dialog[open]::backdrop {
  background: rgba(255, 0, 0, 60%);
}

<p><img src="https://img.php.cn/upload/article/000/000/000/173086397449699.jpg" alt="EXPLORING HTML ELEMENTS: <DIALOG>"></p>

<h2>
  
  
  感谢您的阅读
</h2>

<p>这是我的第一篇文章，所以感谢您的阅读，如果我以任何方式提供了帮助，我建议您在 linkedin 上关注我，我的母语是葡萄牙语，所以我的大部分帖子都是葡萄牙语的，但我正在尝试发布一些东西也是英文的。我打算从现在开始发布类似的内容，如果您对如何改进此模式和抽屉策略有任何建议，可以将它们发送给我。</p>


          

            
        

以上是探索 HTML 元素：

的详细内容。更多信息请关注PHP中文网其他相关文章！