全屏npm包screenfull,无法全屏antd的modal弹窗?
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全屏了,再点击打开弹窗按钮,弹窗并没有出现,退出全屏,发现弹窗已经打开了,但没有在全屏上显示
回复
1个回答

test
2024-07-20
Modal
组件其实默认是渲染到了 document.body 下面,而使用 screenfull 时,只是保证了 div.ref={screenfullDom} 这个节点全屏。
可以尝试修改 getContainer
为 false 试试。
如果还不行,考虑利用 isFullScreen 这个状态,维护Modal的样式。
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容