无障碍优先：对话
又到了更新博客的时间了，这次我要讲的是如何制作一个对话框弹出窗口。看过我之前文章的朋友可能知道，我写过关于原生<dialog>元素的内容，但目前它的支持还不太完善，只适用于Blink基于 Linux 的浏览器。
对话框这种看似不起眼的元素在用户界面和用户体验设计中已经存在很长时间了，每个人都有自己实现它的方式。我们这些上了年纪的人应该都很熟悉 jQuery UI，它是最常用的方法，但是为什么要为了一个功能而加载整个库呢？
我将采用另一种方法，使用功能强大的<details>元素。当然，这意味着仍然无法在IE浏览器中使用，但这总算是个开始。这是最终成果。接下来我会逐步解释其中的原理。
要求
与以往一样，我们的目标是同时支持键盘用户和鼠标用户，让我们来看看规格，看看我们能发现什么。
键盘
- Tab键，切换到下一个可选项目（浏览器默认处理此操作）
- Shift + Tab 键，Tab 键可切换到上一个可选项目（浏览器默认会自动处理）。
- 按下退出键，隐藏对话框
老鼠
对于鼠标操作，有两个简单的规则：单击对话框内部即可像往常一样与项目进行交互；单击对话框外部即可关闭对话框。
标记
正如我之前所说，我将使用<details>一个内置了许多我想要的功能的元素。
正如你所见，所有基本框架都已具备，但我们不能称之为对话。我们需要去掉底部那部分，而这正是样式的作用所在。
款式
我不太喜欢详细描述我的风格，这只是我个人的选择。如果你知道更好的方法，或者想知道我为什么会用某种特定的方式来创作，欢迎在下方留言提问🙂
好了，看起来没问题，我们就先这样吧……哦，它打开了，但是没办法关掉。这可不太理想，该看看JS代码了。
JavaScript
我使用 ES6 类来包含我的控件和监听器，你不一定要这样做，但既然我们反正不支持 IE，为什么不呢？
该<details>标签会根据一个开放属性而改变，我们可以利用这一点将控制功能转移到 JavaScript 中。按下<summary>“按钮”仍然有效，但我们不需要依赖它。
此外，我们还添加了点击事件和 Esc 键的监听器。一旦所有主要功能模块都已就位，JavaScript 就非常适合添加你需要的各种小功能。
结尾
又一篇博文到此结束，感谢阅读。你可能已经注意到，也可能没有，我最近更新频率不如以往。这是因为我找到了一份新工作🎉🎉。这份工作很棒也很令人兴奋，但同时也让我的大脑几乎没有空间来处理这类事情。希望随着时间的推移，我能恢复到更规律的更新频率。
如果这篇文章中有任何你或我没看懂的地方，请随时在下方留言。
再次感谢
。❤🦄🦄🧠❤🦄❤❤🦄