JS遮罩层|极客笔记

JS遮罩层

在网页开发中，遮罩层是一种常用的技术，用于在页面上覆盖一层半透明的背景，常用于模态框、弹窗等效果。在本文中，我们将详细介绍如何使用JavaScript实现一个简单的遮罩层效果。

1. HTML结构

首先，我们需要在HTML中创建一个用于遮罩层的元素。通常情况下，我们可以使用一个<div>元素来实现遮罩层效果。以下是一个简单的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遮罩层示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="overlay" id="overlay"></div>
<div class="modal" id="modal">
  <h1>这是一个模态框</h1>
  <p>点击关闭按钮关闭模态框</p>
  <button id="closeBtn">关闭</button>
</div>
<script src="script.js"></script>
</body>
</html>

在上面的代码中，我们创建了两个<div>元素，一个用于遮罩层效果的overlay，一个用于模态框效果的modal。模态框中包含一个标题、一段文本和一个关闭按钮。

2. CSS样式

接下来，我们需要为遮罩层和模态框添加一些样式。以下是一个简单的CSS样式文件：

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  display: none;
}

.modal h1 {
  margin-top: 0;
}

.modal p {
  margin-bottom: 10px;
}

.modal button {
  padding: 5px 10px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.modal button:hover {
  background-color: #0056b3;
}

在上面的CSS样式中，我们为overlay和modal元素添加了一些定位、背景颜色、边框、内边距等样式，以及模态框中标题、文本和关闭按钮的样式。

3. JavaScript实现

最关键的部分是通过JavaScript来添加遮罩层效果。以下是一个简单的JavaScript代码：

const overlay = document.getElementById('overlay');
const modal = document.getElementById('modal');
const closeBtn = document.getElementById('closeBtn');

function openModal() {
  overlay.style.display = 'block';
  modal.style.display = 'block';
}

function closeModal() {
  overlay.style.display = 'none';
  modal.style.display = 'none';
}

closeBtn.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);

在上面的JavaScript代码中，我们通过获取overlay、modal和closeBtn元素，并为关闭按钮和遮罩层添加了点击事件监听器。当点击关闭按钮或点击遮罩层时，调用closeModal()函数，将遮罩层和模态框隐藏。