一、什么是遮罩层
遮罩层是我们在网页中常见的一种效果,它可以把一个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 属性来控制遮罩层的样式。遮罩层是现代网页设计中常用的一种元素,有了这个技巧,我们可以更加方便地自定义和控制遮罩层的样式。