DIV遮罩层如何实现-前端开发

下面是“DIV遮罩层如何实现”的完整攻略。

下面是“DIV遮罩层如何实现”的完整攻略。

什么是DIV遮罩层？

DIV遮罩层是一种覆盖在网页上，通过透明的DIV层来对网页进行遮蔽的技术。通常用在弹出窗口、提示信息等场景中。

实现步骤

1. 布局

首先，我们需要在html中添加一个用来显示遮罩层的div元素。

<div class="mask"></div>

2. 样式

接下来，我们需要定义这个div元素的样式。

.mask{
  position: fixed; /*将元素设置为固定定位*/
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999; /*设置层级，使其覆盖在其他元素上*/
  background-color: rgba(0,0,0,0.5); /*通过rgba函数来控制遮罩层的透明度*/
  display: none; /*将元素隐藏*/
}

3. 显示遮罩层

我们可以通过JavaScript来控制遮罩层的显示和隐藏。

document.querySelector('.mask').style.display = 'block';

运行上述代码后，遮罩层就会被显示出来。

4. 隐藏遮罩层

同样地，我们可以通过JavaScript来控制遮罩层的隐藏。

document.querySelector('.mask').style.display = 'none';

5. 示例一：登录弹窗

下面是一个示例，通过遮罩层来弹出一个登录窗口。

<button id="login-btn">登录</button>

<div class="mask"></div>

<div class="login-modal">
  <h2>登录</h2>
  <form>
    <input type="text" placeholder="用户名">
    <input type="password" placeholder="密码">
    <button type="submit">登录</button>
  </form>
</div>

<script>
  var loginBtn = document.getElementById('login-btn');
  var mask = document.querySelector('.mask');
  var loginModal = document.querySelector('.login-modal');

  loginBtn.addEventListener('click', function(){
    // 显示遮罩层和登录窗口
    mask.style.display = 'block';
    loginModal.style.display = 'block';
  });

  // 点击遮罩层或关闭按钮，隐藏遮罩层和登录窗口
  mask.addEventListener('click', function(){
    mask.style.display = 'none';
    loginModal.style.display = 'none';
  });

  loginModal.querySelector('.close-btn').addEventListener('click', function(){
    mask.style.display = 'none';
    loginModal.style.display = 'none';
  });
</script>

6. 示例二：loading遮罩层

下面是一个示例，通过遮罩层来显示一个loading的动画。

<button id="loading-btn">加载</button>

<div class="mask"></div>

<div class="loading-modal">
  <span class="loading"></span>
</div>

<style>
  .loading {
    border: 4px solid rgba(0,0,0,0.2);
    border-top: 4px solid #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.8s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

<script>
  var loadingBtn = document.getElementById('loading-btn');
  var mask = document.querySelector('.mask');
  var loadingModal = document.querySelector('.loading-modal');

  loadingBtn.addEventListener('click', function(){
    // 显示遮罩层和loading动画
    mask.style.display = 'block';
    loadingModal.style.display = 'block';
  });

  // 点击遮罩层，隐藏遮罩层和loading动画
  mask.addEventListener('click', function(){
    mask.style.display = 'none';
    loadingModal.style.display = 'none';
  });
</script>