网页全屏，modal 弹框无法显示的问题

最新推荐文章于 2025-06-19 09:20:12 发布

原创最新推荐文章于 2025-06-19 09:20:12 发布 · 4.3k 阅读

CC 4.0 BY-SA版权

本文介绍了一个校园项目中遇到的问题：当页面主体进入全屏模式后，iview弹窗组件无法正常显示。文章详细解释了这一现象的原因，并提供了解决方案，包括如何使用JavaScript来实现页面元素的全屏与退出全屏。

问题描述
页面主体部分全屏后，页面中的所有弹窗不能显示，退出全屏后，弹窗正常。
解决方法
校园项目中，所有用到的弹窗为iview的弹窗组件，该弹窗组件会生成在body中，和项目主体app为平行关系，项目主体全屏后，层级最高，弹出会被盖在app层级下面，不能显示。
解决方法--调用document.documentElement

// 全屏
requestFullscreen = (element) => {
  const element = element || document.documentElement
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen()
  }
}
// 退出全屏
exitFullscreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen()
  }