js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

下面我会详细讲解“js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)”的完整攻略。

1. 实现思路

首先，要实现遮罩居中弹出层，我们需要使用CSS实现弹出层的样式，用JS实现弹出层的位置和滚动条滚动的效果。具体步骤如下：

定义一个遮罩层的样式mask，设置background为半透明的黑色，并将它的z-index设为比页面上其他元素的z-index要高。
定义一个弹出层的样式dialog，设置position为fixed，left和top都为50%，即把它放在屏幕的中央位置。
使用JavaScript为弹出层定位，通过offsetWidth和offsetHeight获取弹出层的宽度和高度。同时，使用scrollHeight和scrollTop可以获取页面的滚动高度。这样就可以让弹出层跟着页面滚动条滚动。

2. 示例说明

示例一

我们以一个简单的登录框为例，来演示如何实现遮罩居中弹出层。

<!-- HTML代码 -->
<button id="showBtn">显示登录框</button>
<div id="mask"></div>
<div id="dialog">
  <h3>登录</h3>
  <form>
    <label>用户名：</label>
    <input type="text" name="username">
    <br>
    <label>密码：</label>
    <input type="password" name="password">
    <br>
    <button type="submit">登录</button>
  </form>
</div>

/* CSS代码 */
#mask {
  display:none;
  position:fixed;
  top:0;
  left:0;
  z-index:9999;
  background:rgba(0,0,0,0.5); 
}

#dialog {
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width:300px;
  height:200px;
  z-index:10000;
  background-color:#fff;
  padding:20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  text-align:center;
}

// JavaScript代码
window.onload = function() {
  var showBtn = document.getElementById('showBtn');
  var dialog = document.getElementById('dialog');
  var mask = document.getElementById('mask');

  // 显示登录框
  showBtn.onclick = function() {
    mask.style.display = 'block';
    dialog.style.display = 'block';

    // 让弹出层居中
    dialog.style.marginTop = -dialog.offsetHeight/2 + 'px';
    dialog.style.marginLeft = -dialog.offsetWidth/2 + 'px';

    // 监听窗口大小改变事件，重新居中
    window.onresize = function() {
      dialog.style.marginTop = -dialog.offsetHeight/2 + 'px';
      dialog.style.marginLeft = -dialog.offsetWidth/2 + 'px';
    }

    // 监听滚动条滚动事件，让弹出层跟随滚动
    window.onscroll = function() {
      dialog.style.top = document.documentElement.scrollTop + document.documentElement.clientHeight/2 - dialog.offsetHeight/2 + 'px';
    }
  }

  // 隐藏登录框
  mask.onclick = function() {
    mask.style.display = 'none';
    dialog.style.display = 'none';
  }
}

在示例一中，我们首先定义了一个登录框的HTML代码，并使用CSS样式设置了弹出层的样式和遮罩层的样式。然后，我们使用JS实现了弹出层的居中定位及跟随滚动。最后，我们通过监听点击事件实现了点击遮罩层隐藏登录框。

示例二

下面，我们再以一个图片展示为例，来演示如何实现遮罩居中弹出层。

<!-- HTML代码 -->
<div class="container">
  <img src="https://picsum.photos/id/237/200/300" alt="图片" class="img">
  <div class="mask"></div>
  <div class="dialog">
    <img src="https://picsum.photos/id/237/400/600" alt="大图" class="big-img">
  </div>
</div>

/* CSS代码 */
.container {
  position:relative;
  margin:0 auto;
  width:200px;
  height:300px;
}

.img {
  width:100%;
  height:100%;
}

.mask {
  display:none;
  position:absolute;
  top:0;
  left:0;
  z-index:999;
  background:rgba(0,0,0,0.5); 
  width:100%;
  height:100%;
}

.dialog {
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index:1000;
}

.big-img {
  display:block;
  max-width:80%;
  max-height:80%;
}

// JavaScript代码
window.onload = function() {
  var img = document.querySelector('.img');
  var dialog = document.querySelector('.dialog');
  var mask = document.querySelector('.mask');
  var bigImg = document.querySelector('.big-img');

  // 显示大图
  img.onclick = function() {
    mask.style.display = 'block';
    dialog.style.display = 'block';
    bigImg.src = img.src;
  }

  // 隐藏大图
  mask.onclick = function() {
    mask.style.display = 'none';
    dialog.style.display = 'none';
  }

  // 监听滚动条滚动事件，让弹出层跟随滚动
  window.onscroll = function() {
    dialog.style.top = document.documentElement.scrollTop + document.documentElement.clientHeight/2 - dialog.offsetHeight/2 + 'px';
  }
}

在示例二中，我们首先定义了一个图片的HTML代码，并使用CSS样式设置了图片、遮罩层和弹出层的样式。然后，我们使用JS实现了点击图片弹出大图，并对大图进行居中定位及跟随滚动。最后，我们通过监听点击事件实现了点击遮罩层隐藏大图。