对话框窗口只需编写 HTML 即可使用。它们基于当前每个主要浏览器都支持的 Web 组件。
我要坦白——我不太喜欢模态对话框（或简称为“模态”）。使用“讨厌”这个词太过强烈了，但是让我们说，在我开始阅读篇文章时，没有什么比在我什至开始理解我是什么之前就被模态窗口“扇耳光”更令人沮丧的了看着。
也就是说，模态在我们中间无处不在。它们是我们不能简单地发明的用户界面范例。如果巧妙而明智地使用它们，我敢说它们甚至可以帮助向文档或应用程序添加更多上下文。
在我的整个职业生涯中，我编写了相当多的模 whatsapp 手机号码列表 态我已经使用和最近的React构建了定制的实现。如果您曾经努力构建模态，那么您就会明白我说的意思：很容易弄错它们。不仅从视觉的角度来看，还有许多棘手的用户交互也需要考虑在内。
我是那种喜欢“深入”让我烦恼的话题的人——尤其是当我发现这个话题重新浮出水面时——希望是为了避免再次访问它们。当我开始深入了解Web Components时，我“啊哈 片刻。现在 Web Components 得到了每个主要浏览器（RIP、IE11）的广泛支持，这打开了一扇全新的机会之门。我心想：
“如果可以构建一个模态，作为开发页面或应用程序的开发人员，我不必为任何额外的 JavaScript 配置而烦恼怎么办？”
一次编写，到处运行，可以这么说，或者至少这是我的崇高愿望。好消息。确实可以构建一个只需要编写 HTML 即可使用的具有丰富交互的模式。
注意： 为了从本文和代码示例中获益，您需要对 HTML、CSS 和 JavaScript 有一定的了解。
现在我们已经介绍了“为什么”要抓这个特别的痒，在本文的其余部分，我将解释“如何”构建它。 首先，关于 快速速成课程。它们是封装范围的 HTML、CSS 和 JavaScript 的捆绑片段。意思是，组件外部的样式不会影响内部，反之亦然。可以把它想象成一个密封的UI 设计“无尘室”。 乍看这似乎很荒谬。为什么我们想要一大块我们无法通过 CSS 从外部控制的 UI？坚持这个想法，因为我们很快就会回来。 最好的解释是可重用性。以这种方式构建组件意味着我们不会受制于任何特定的 JS框架。在围绕 Web 标准的对话中，一个常用的短语是“使用平台”。现在，该平台本身比以往任何时候都具有出色的跨浏览器支持。