[分享]css全屏加遮罩移动端

CSS全屏加遮罩移动端是一种常用的实现方式，可用于防止用户误操作或提供视觉效果。下面我们将详细介绍如何实现。/ CSS代码片段 / body { overflow: hidden; } .mask {...

CSS全屏加遮罩移动端是一种常用的实现方式，可用于防止用户误操作或提供视觉效果。下面我们将详细介绍如何实现。

/* CSS代码片段 */
body {
  overflow: hidden;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: #000;
  opacity: 0.5;
}

.fullscreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
} 

首先，我们设置body的overflow为hidden，这样在遮罩出现时，用户无法滚动网页内容。接着，创建一个遮罩元素mask，它的位置为固定定位，左上角位置为(0,0)，宽度和高度为100%。设置它的z-index为999，确保它在其他元素的上方。同时，为了让遮罩有一定的透明度和黑色的背景色，可以设置它的opacity属性和background-color属性。

接着，在需要全屏的元素上添加fullscreen类。设置它的位置为绝对定位，左上角位置为(0,0)，宽度和高度为100%。同时，z-index属性设为998，确保它在mask之下。这样就可以创建一个全屏的元素并遮罩其它内容了。

最后，通过JavaScript实现遮罩和全屏元素的显示和隐藏。例如，我们可以给一个按钮绑定点击事件，在事件处理函数中，先隐藏已经显示的遮罩和全屏元素（如果有的话），接着设置需要显示的遮罩和全屏元素为可见。

/* JavaScript代码片段 */
let mask = document.querySelector('.mask');
let fullScreen = document.querySelector('.fullscreen');

function toggleFullScreen() {
  if (mask && fullScreen) {
    if (mask.style.display === 'none' || fullScreen.style.display === 'none') {
      mask.style.display = 'block';
      fullScreen.style.display = 'block';
    } else {
      mask.style.display = 'none';
      fullScreen.style.display = 'none';
    }
  }
}

let btn = document.querySelector('.toggle-btn');
btn.addEventListener('click', toggleFullScreen); 

以上就是CSS全屏加遮罩移动端的实现方法。希望能对您有所帮助。