门户网站

在前端开发中，有时我们需要在与触发位置不同的位置显示组件（例如模态框或工具提示）。问题在于 UI 元素需要渲染在 DOM 树的不同部分，而触发该元素的组件需要一种方法来影响渲染位置。

在其他框架中，这通常通过专用 API 解决，例如 createPortal()。但是，此类 API 在服务器端渲染中效果不佳，因此需要采用其他方法。

幸运的是，有一种名为 顶层 的原生行为可以为我们处理这个问题。它在所有主流浏览器中都受支持。

Qwik UI

Qwik UI 团队出色地填补了空白，使我们能够在所有浏览器中使用此行为进行生产。

模态框

当我们不想让用户与页面的其他部分交互时，我们会使用模态框。其余内容处于非活动状态，或无法交互。

Qwik UI 的模态框组件 使用对话框元素的 showModal 方法，该方法在浏览器中得到良好支持，并自动处理将 UI 放置在 HTML 文档之外。

它还包括诸如焦点和滚动锁定、警报对话框、自动进入和退出动画支持以及背景动画等行为。

弹出框

如果 UI 元素可以与页面的其他部分交互，则它不是模态框。

一些非模态组件的示例包括

• 弹出框
• 覆盖层
• 吐司通知
• 工具提示
• 下拉菜单
• 选择框
• 组合框

MDN 的弹出框 API 替代了非模态组件中对门户网站的需求。所有主流浏览器也都支持它。

Qwik UI 通过提供与原生规范具有功能一致性的垫片来解决这个问题。您可以使用 Qwik UI 的弹出框 组件在生产环境中使用弹出框 API 的行为。

对于选择框或组合框等组件，Qwik UI 还提供了选择加入“浮动”行为的功能。例如，当列表框锚定到输入元素时。您可以通过在弹出框组件中添加 floating={true} 来实现。这将执行浮动行为所需的额外 javascript 代码。

它是故意选择加入的，在某个时候，CSS 锚定 API 将提供原生解决方案，因此当它获得更广泛的支持时，应该有一个简单的迁移路径。

由于这些解决方案建立在原生规范之上，这也意味着我们需要预取的 javascript 代码更少，因此需要完成的工作也更少！

Qwik UI 的弹出框和模态框组件都可以使用，无论元框架或微前端如何，只要支持 Qwik 即可。