在Garden中实现插件框外全屏模态框的技术求助

核心修复思路 #

Banno插件容器默认会通过overflow: hidden或父元素position: relative限制内部元素的显示范围。要让模态框全屏，核心是将模态框挂载到全局文档根节点（而非插件内部容器），并配合全屏样式覆盖视口。

具体实现步骤 #

• 调整模态框挂载目标
  无论使用原生JS还是框架，将模态框DOM直接插入document.body：

  • React示例：

    import ReactDOM from 'react-dom/client';
    
    // 挂载到body而非插件容器
    const root = ReactDOM.createRoot(document.body);
    root.render(<YourFullscreenModal />);
    

  • Vue示例：

    <template>
      <teleport to="body">
        <div class="fullscreen-modal">
          <!-- 模态框内容 -->
        </div>
      </teleport>
    </template>
    

  • 原生JS示例：

    const modal = document.createElement('div');
    modal.className = 'fullscreen-modal';
    // 写入模态框内容后挂载到body
    document.body.appendChild(modal);
    

• 添加全屏样式
  给模态框设置固定定位覆盖整个视口：

  .fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999; /* 确保层级高于Banno原生UI */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  

• 临时解除插件容器溢出限制
  若插件容器存在overflow: hidden，需在模态框显示时临时移除，关闭后恢复：

  const pluginContainer = document.querySelector('.your-plugin-container');
  // 显示模态框
  pluginContainer.style.overflow = 'visible';
  // 关闭模态框
  pluginContainer.style.overflow = 'hidden';
  

关键注意事项 #

• 确保z-index足够高，避免被Banno原生界面遮挡；
• 使用框架的 teleport/portal 功能时，需在组件卸载时清理body中的模态框DOM，防止内存泄漏；
• 测试不同屏幕尺寸，确保模态框在各种布局下都能完整覆盖视口。

内容的提问来源于stack exchange，提问作者Anuj Srivastav