返回

页面全屏实现与解决过程中遇到的问题（弹框不显示）

前端

在日常的工作中，有些场景会需要实现全屏的效果，常见的全屏效果会分为全屏以及页面全屏两种。

页面全屏

页面全屏就是只在浏览器视觉视口（浏览器可看到的区域）内，只显示页面内容，而不会显示浏览器的地址栏、工具栏等其他元素，这样可以让用户更加专注于页面内容。

实现页面全屏的方法有很多，比较常见的有以下几种：

  1. 使用 JavaScript 实现：

    function toggleFullScreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
}

  2. 使用 CSS 实现：

    body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

  3. 使用 HTML 实现：

    <html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
  ...
</body>
</html>

全屏

全屏是指让浏览器窗口占据整个屏幕，包括浏览器的地址栏、工具栏等其他元素。

实现全屏的方法也有很多，比较常见的有以下几种：

  1. 使用 JavaScript 实现：

    function toggleFullScreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
}

  2. 使用 CSS 实现：

    body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

  3. 使用 HTML 实现：

    <html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
  ...
</body>
</html>

在实现页面全屏或全屏时，可能会遇到一些问题，例如弹框不显示。

弹框不显示

弹框不显示的原因有很多，常见的原因包括：

  • 弹框的父元素没有设置 overflow: visible;
  • 弹框的 z-index 值太小；
  • 弹框的位置设置不正确；
  • 弹框的显示属性被设置为 none。

解决方法：

  • 将弹框的父元素的 overflow 属性设置为 visible；
  • 将弹框的 z-index 值设置为大于其他元素的 z-index 值；
  • 将弹框的位置设置为正确的位置；
  • 将弹框的显示属性设置为 block。

如果以上方法都不能解决弹框不显示的问题，可以尝试使用 JavaScript 来显示弹框。

function showModal() {
  document.getElementById("myModal").style.display = "block";
}

当然，在使用以上方法之前，需要先检查一下你使用的浏览器是否支持全屏API。