创建自定义遮罩层的实现方法-纯JS控制遮罩层样式

小蓝 • 2024-12-15 12:49 • 编程

一、什么是遮罩层

遮罩层是我们在网页中常见的一种效果，它可以把一个div或者是整个页面遮盖住，以达到弹出框、提示等效果。一般来说，遮罩层是全屏大小的半透明层，上面包含了目标内容。

在前端开发中，我们通常使用CSS属性来控制遮罩层的样式。但是本文将阐述通过纯JS来自定义遮罩层的实现方法，主要包括以下几个方面：

二、创建/删除遮罩层

定义一个函数，通过JS动态在页面中创建遮罩层，并且可以在不需要时把它删除掉。

/**
 * 创建遮罩层
 */
function createMask(){
    var mask = document.createElement('div');
    mask.setAttribute('class', 'mask');
    document.body.appendChild(mask);
}

/**
 * 删除遮罩层
 */
function removeMask(){
    var mask = document.querySelector('.mask');
    mask.parentNode.removeChild(mask);
}

上面的代码中，我们定义了两个函数，创建遮罩层的函数 createMask 和删除遮罩层的函数 removeMask。在这两个函数中，我们通过JS动态创建/删除一个 div，加上特定的样式，这就是我们的遮罩层。

三、控制遮罩层的样式

接下来，我们需要对遮罩层的样式进行控制，这可以通过CSS属性来实现。以下是一个基础的遮罩层的CSS样式：

.mask {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

在上面的代码中，我们设置了遮罩层为 fixed 定位，z-index 为 1000，left、top、right、bottom 都为 0，这样可以让遮罩层充满整个屏幕。其中 background-color 为半透明黑色。

通过JS，我们可以修改遮罩层的属性来控制遮罩层的样式。以下是一个修改遮罩层背景颜色的函数：


/**
 * 修改遮罩层背景颜色
 * @param {string} color - 背景颜色
 */
function changeMaskBgColor(color){
    var mask = document.querySelector('.mask');
    mask.style.backgroundColor = color;
}

在上面的代码中，我们通过 document.querySelector 获取到遮罩层元素，然后通过设置元素的 style 属性来修改背景颜色。

四、遮罩层的实际应用

最后，我们来看一个实际应用遮罩层的例子。以下是一个简单的登录框，当点击登录按钮时，会在页面中创建一个遮罩层，并弹出登录框；当点击登录框外的遮罩层或关闭按钮时，会删除该遮罩层。

/**
 * 打开登录框
 */
function openLoginBox(){
    createMask(); // 创建遮罩层
    var loginBox = document.createElement('div');
    loginBox.setAttribute('class', 'login-box');
    loginBox.innerHTML = '<div class="login-content">登录框内容</div><div class="close-btn">关闭</div>';
    document.body.appendChild(loginBox); // 将登录框添加到body中

    // 点击关闭按钮或者遮罩层时，删除遮罩层和登录框
    var closeBtn = document.querySelector('.close-btn');
    closeBtn.onclick = removeMask;
    var mask = document.querySelector('.mask');
    mask.onclick = removeMask;
}

/**
 * 初始化函数
 */
(function(){
    var loginBtn = document.querySelector('.login-btn');
    loginBtn.onclick = openLoginBox;
}());

在上面的代码中，我们创建了一个打开登录框的函数 openLoginBox，在该函数中，我们先创建遮罩层，并在遮罩层上添加了登录框的 HTML 内容。最后，我们通过设置登录框的样式和事件，使其在页面中弹出。

五、小结

纯JS控制遮罩层样式的实现方法很简单，我们只需要用JS来动态创建、删除 div 元素，并通过CSS属性、JS设置元素的 style 属性来控制遮罩层的样式。遮罩层是现代网页设计中常用的一种元素，有了这个技巧，我们可以更加方便地自定义和控制遮罩层的样式。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/258374.html