网站建设中的数据库规划,wordpress class,杭州网站制作培训,淮北网站建设设计1、全屏下弹窗被遮挡的问题
参考#xff1a;https://www.jianshu.com/p/b22d1ad9533e
原因#xff1a; 需要全屏的节点部分被传入 screenfull 中#xff0c;弹窗的层级永远低于全屏#xff0c;所以被遮挡。
解决方法#xff1a; 方式1#xff1a;把整个 body 全屏https://www.jianshu.com/p/b22d1ad9533e
原因 需要全屏的节点部分被传入 screenfull 中弹窗的层级永远低于全屏所以被遮挡。
解决方法 方式1把整个 body 全屏真正需要全屏的内容通过样式处理成全屏的样子。这样既可以利用全屏的ESC和自带的退出按钮又不会存在遮挡弹窗的问题。 方式2直接iframe嵌入不会有遮挡问题但加载会慢点
代码如下
const TestFullScreen: React.FCProps props {const reportContent useRefHTMLIFrameElement(null);const [isFullscreen, setIsFullscreen] useState(false);const fullScreen () {if (!document.fullscreenElement) {setIsFullscreen(false);}};useEffect(() {// 监听全屏事件document.addEventListener(fullscreenchange, fullScreen);return () {document.removeEventListener(fullscreenchange, fullScreen);};}, []);const onFullScreenClick () {// 把body全屏 解决全屏下弹窗被遮挡的问题document.querySelector(body)?.requestFullscreen();// 需要全屏的内容通过样式处理setIsFullscreen(true);};return (div classNametest-fullscreenbutton onClick{onFullScreenClick}全屏测试/buttondiv// 全屏时通过fixed 铺满全屏className{isFullscreen? fixed z-[100] top-0 left-0 w-screen h-screen: h-full}ref{reportContent}{/* 有孩子节点就直接渲染没有就iframe嵌入url */}{props?.children ? props.children : iframe url{url} /}/div/div);
};2、退出后的元素的宽高还是全屏时的宽高
在退出全屏时重新设置宽高
const fullScreen () {if (!document.fullscreenElement) {setIsFullscreen(false);// 当没有children时为iframe嵌入不会有这个问题不需要处理if (reportContent.current props?.children) {reportContent.current.style.width 100%;reportContent.current.style.height calc(100% - 40px);}}
};
