Portal

在前端開發中，有時我們需要在與觸發元件不同的地方顯示元件（例如模態框或工具提示）。問題是 UI 元素需要在 DOM 樹的不同部分渲染，並且觸發元素的元件需要一種方法來影響渲染位置。

在其他框架中，這通常通過專用 API 來解決，例如 createPortal()。然而，此類 API 不太適用於伺服器端渲染，因此需要一種替代方法。

幸運的是，有一種原生行為可以為我們處理這個問題，稱為頂層。所有主流瀏覽器都支援它。

Qwik UI

Qwik UI 團隊出色地填補了這些空白，讓我們能夠在所有瀏覽器的生產環境中使用這種行為。

模態框

當我們不希望使用者與頁面的其餘部分互動時，我們會使用模態框。其餘內容是惰性的，或者無法與之互動。

Qwik UI 的模態框元件 使用對話方塊元素的 showModal 方法，該方法在瀏覽器中得到很好的支援，並自動處理將 UI 放置在 HTML 文件之外。

它還包括焦點和滾動鎖定、警報對話方塊、自動進入和退出動畫支援以及背景動畫等行為。

彈出視窗

如果 UI 元素可以與頁面的其餘部分互動，那麼它就不是模態的。

非模態元件的一些例子是

• 彈出視窗
• 覆蓋層
• 訊息提示
• 工具提示
• 下拉式選單
• 選擇框
• 組合框

MDN 的彈出視窗 API 取代了非模態元件中對入口網站的需求。所有主流瀏覽器也都支援它。

Qwik UI 通過提供與原生規範具有功能對等性的 polyfill 來承擔這項任務。您現在可以使用 Qwik UI 的彈出視窗 元件在生產環境中使用彈出視窗 API 的行為。

對於選擇框或組合框等元件，Qwik UI 還提供了選擇加入「浮動」行為的功能。例如，當清單框錨定到輸入元素時。您可以通過在彈出視窗元件中添加 floating={true} 來實現。這將執行浮動行為所需的一些額外 JavaScript。

它是特意選擇加入的，在某些時候，CSS Anchor API 將提供原生解決方案，因此當它獲得更廣泛的支援時，應該會有一個簡單的遷移路徑。

因為這些解決方案建立在原生規範之上，這也意味著我們需要預先擷取的 JavaScript 更少，因此需要完成的工作也更少！

只要支援 Qwik，Qwik UI 的彈出視窗和模態框元件就可以使用，無論是元框架還是微前端。