全屏npm包screenfull,无法全屏antd的modal弹窗?

WXL570CN
  • 25
浙江
const screenfullDom = useRef(null)
const [isFullScreen , setIsFullScreen] = useState(false)
const [modalVisible, setModalVisible] = useState(false)

<div ref={screenfullDom}>
  <Button 
    onClick={()=>{ setModalVisible(true) }}
  >
    打开弹窗
  </Button>
  <Button 
    onClick={()=>{ 
        screenfull.request(screenfullDom)
        setIsFullScreen(true)
    }}
  >
    {isFullScreen ? '全屏' : '退出全屏'}
  </Button>
  <Modal visible={modalVisible} title='modal弹窗' ... />
</div>

点击全屏按钮,div包括div中的Button全屏了,
再点击打开弹窗按钮,弹窗并没有出现,
退出全屏,发现弹窗已经打开了,但没有在全屏上显示

回复
阅读 434
3 个回答
✓ 已被采纳

Modal 组件其实默认是渲染到了 document.body 下面,而使用 screenfull 时,只是保证了 div.ref={screenfullDom} 这个节点全屏。

可以尝试修改 getContainer 为 false 试试。
image.png

如果还不行,考虑利用 isFullScreen 这个状态,维护Modal的样式。

lihaixing
  • 175
香港

全屏的元素是没法被其它元素覆盖的,除非你这个元素是全屏元素的儿子,你的Modal应该加到body元素里了,没有被全屏元素包含,你把Modal渲染到全屏元素下面就可以了(getContainer=false)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏