Web作为平台正在不断发展。我喜欢它！
开发人员不再需要创建复杂的逻辑才能在Web应用程序中具有弹出 /模式组件。< / p>
HTML dialog元素及其关联的事件允许您创建快速且易于访问的本机自定义对话框。
最佳功能
此功能是对话框元素和浏览器实现的本地：
- 事件（开放，关闭，取消）
- 自动对焦在打开的对话框上（只需按“ TAB”键即可在内部导航）
- 用户按“ ESC”键关闭
- 自动滚动
- 继续堆叠上下文（对话框对话）
- 包括元素背后的
::backdrop伪元素
浏览器兼容性
对话框元素具有93％的浏览器兼容性，换句话说，它被认为是全部支持！
有关更多详细信息，请访问参考文献Can I Use和MDN Web Docs。
演示代码
我创建了一个简单的演示代码，该代码在操作中显示对话框元素，并在用户交互时打印了所处理的事件的名称。
随意探索代码ðð»
https://codepen.io/lucasm/pen/YzRBzVQ
解释
1）在html中，您需要创建一个<dialog>元素并归因于操纵它
2）还创建一个<button>打开对话框（呼叫事件open）
3）在对话框内，放置您想要的任何内容，但不要忘记包含操作按钮，通常一个用于确认主操作，另一个可以关闭对话框（呼叫事件close）
4）在CSS中，您可以样式元素
5）在JavaScript中，所有要处理事件的逻辑
6）当用户按ESC键时，还放置了事件侦听器！ （致电事件cancel）
仅此而已！
希望您喜欢它！
您对html的<dialog>元素有何看法？
如果您喜欢我的内容，请consider supporting my latest open source project with a star on GitHub