01 引言

企業系統中，交互設計的優劣直接影響用户的操作體驗和工作效率。模態框作為一種常見的交互組件，在企業系統中扮演着重要的角色。它可以在不跳轉頁面的情況下，讓用户處理事務，避免打斷工作流程，在複雜的企業場景中發揮關鍵作用。

02 功能特點

多樣化的交互體驗

模態框組件支持多種交互方式，默認支持使用Esc 鍵關閉模態框，還能控制雙擊蒙層關閉模態框。此外，模態框可調整大小、拖拽位置，滿足用户在不同場景下的使用需求。

例如：
在處理複雜表單時，用户可以根據自己的喜好調整模態框的大小和位置，以便更方便地查看和輸入信息。

支持用户個性化：

該組件支持個性化設置，開啓個性化後可配合接口保存位置信息、大小等。企業可以根據自身的品牌形象和用户需求，定製模態框的外觀、大小、位置等，通過customizedCode屬性實現個性化設置的持久化存儲，確保用户在不同設備上獲得一致的體驗。

內嵌及穿越iframe支持：

模態框組件支持內嵌使用及穿越 iframe，可用於指定模態框所在的容器，適用於嵌入式模態框場景，為企業級應用提供了更多靈活性。

與React Context的無縫集成：

Modal.open模態框能夠與React Context無縫集成，通過 ModalProvider提供的injectModal或useModal，開發者可以輕鬆地在模態框中訪問上下文數據，實現更靈活的功能。

與H-ZERO系統菜單標籤頁集成：

在複雜的企業系統中，用户可能需要同時處理多個任務。在 H-ZERO 工程中配置modalInTab，我們可以控制模態框是否顯示在菜單標籤頁中。

這一特性在企業系統中非常實用，例如在一些需要在多個標籤頁中進行操作的場景下，用户可以將模態框顯示在特定的標籤頁中，使得操作更加集中和便捷。

點擊查看詳細配置文檔

03 場景示例

H-ZERO 系統多菜單同步操作

在一個企業系統中，用户可能需要同時查看多個項目的進度、任務分配和功能使用情況。傳統系統為了支持多線操作場景，通常是開啓多個菜單頁或打開瀏覽器新頁面處理；個別場景下彈出一個簡單的確認框，但遮罩會覆蓋整個頁面，不開遮罩蒙層又會穿越多個菜單。這種方式缺乏靈活性，或無法滿足複雜業務場景的需求。

解決方案：

H-ZERO 工程中配置modalInTab，模態框包括蒙層在僅在菜單下展示，不影響菜單切換。

例如：

• 在“文檔庫管理”菜單下，點擊文件預覽，文件資源較大，需要等待載入
• 同時支持切換菜單到“企業應用庫”，同步進行新建等操作
• 切迴文檔，可預覽載入完成的文檔，菜單下模態框互不干擾
  
  
  

除以上場景介紹，組件還提供了多種基礎場景示例，如異步關閉、自定義頁腳、多層、自定義座標、關閉按鈕、全屏顯示、多層抽屜、銷燬所有彈出框等，滿足企業系統中各種複雜的交互需求。

點擊查看更多場景案例

聯繫我們

我們將持續深耕 HZEROJS 框架功能，致力於全方位優化客户體驗。若您想深入瞭解，點擊以下 [文檔鏈接]，即可查閲更多相關資料。

同時，我們珍視每一位用户的聲音。若您有獨到的想法或寶貴建議，期待您積極向我們反饋，攜手共促 HZEROJS 框架持續升級 。

● HZEROJS-自定義全局字體

● RICH-UED5.1.x-字體個性化

● HZEROJS

● UED5.1.x用户手冊

立即預約，免費演示 👉 獲取產品演示