js制作带有遮罩弹出层实现登录注册表单特效代码分享

下面将详细讲解实现“JS制作带有遮罩弹出层实现登录注册表单特效”的完整攻略。

1.制作遮罩弹出层

要实现带有遮罩弹出层的效果，首先需要制作一个遮罩层和一个弹出层。

遮罩层

遮罩层是为了使背景页面不可操作以及页面内容有一定的透明度，使用 position: fixed 定位方式，铺满整个页面，且设置 z-index 层级高于其他层级。

遮罩层代码如下：

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

弹出层

弹出层可以用来显示用户的登录或注册表单。使用 position: fixed 定位方式，可以在遮罩层中心位置放置一个盒子，盒子内填充登录或注册表单等内容，并使用 z-index 层级高于遮罩层以及其他内容，从而展现出弹出层的效果。

弹出层代码如下：

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
  z-index: 10000;
}

2.实现JavaScript弹出效果

当用户点击登录按钮时，需要让“遮罩层”和“弹出层”显示出来，当用户点击背景区域或关闭按钮时，则“遮罩层”和“弹出层”需要消失。

报错事件的处理需要使用JavaScript实现。具体方法是使用addEventListener 添加鼠标点击事件和关闭按钮点击事件，同时使用 classList 方法切换“遮罩层”和“弹出层”的 display 属性，从而实现弹出层效果。

示例代码如下：

// 获取登录按钮
let loginBtn = document.querySelector('#loginBtn');
// 获取关闭按钮
let closeBtn = document.querySelector('#closeBtn');
// 获取遮罩层
let overlay = document.querySelector('.overlay');
// 获取弹出层
let popup = document.querySelector('.popup');

// 监听登录按钮的点击事件
loginBtn.addEventListener('click', function () {
  // 打开遮罩层和弹出层
  overlay.classList.add('active');
  popup.classList.add('active');
});

// 监听关闭按钮的点击事件
closeBtn.addEventListener('click', function () {
  // 关闭遮罩层和弹出层
  overlay.classList.remove('active');
  popup.classList.remove('active');
});

// 监听遮罩层的点击事件
overlay.addEventListener('click', function () {
  // 关闭遮罩层和弹出层
  overlay.classList.remove('active');
  popup.classList.remove('active');
});

3.示例说明

示例1：实现一个登录表单的弹出层

HTML代码：

<button id="loginBtn">登录</button>
<div class="overlay"></div>
<div class="popup">
  <h2>登录</h2>
  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <br>
    <button type="submit">提交</button>
  </form>
  <button id="closeBtn">关闭</button>
</div>

CSS代码：

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

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
  z-index: 10000;
}

JavaScript代码：

// 获取登录按钮
let loginBtn = document.querySelector('#loginBtn');
// 获取关闭按钮
let closeBtn = document.querySelector('#closeBtn');
// 获取遮罩层
let overlay = document.querySelector('.overlay');
// 获取弹出层
let popup = document.querySelector('.popup');

// 监听登录按钮的点击事件
loginBtn.addEventListener('click', function () {
  // 打开遮罩层和弹出层
  overlay.classList.add('active');
  popup.classList.add('active');
});

// 监听关闭按钮的点击事件
closeBtn.addEventListener('click', function () {
  // 关闭遮罩层和弹出层
  overlay.classList.remove('active');
  popup.classList.remove('active');
});

// 监听遮罩层的点击事件
overlay.addEventListener('click', function () {
  // 关闭遮罩层和弹出层
  overlay.classList.remove('active');
  popup.classList.remove('active');
});

示例2：实现一个注册表单的弹出层

HTML代码：

<button id="registerBtn">注册</button>
<div class="overlay"></div>
<div class="popup">
  <h2>注册</h2>
  <form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <br>
    <label for="email">电子邮箱：</label>
    <input type="email" id="email" name="email">
    <br>
    <button type="submit">提交</button>
  </form>
  <button id="closeBtn">关闭</button>
</div>

CSS代码：

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

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background-color: #fff;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
  z-index: 10000;
}

JavaScript代码：

// 获取注册按钮
let registerBtn = document.querySelector('#registerBtn');
// 获取关闭按钮
let closeBtn = document.querySelector('#closeBtn');
// 获取遮罩层
let overlay = document.querySelector('.overlay');
// 获取弹出层
let popup = document.querySelector('.popup');

// 监听注册按钮的点击事件
registerBtn.addEventListener('click', function () {
  // 打开遮罩层和弹出层
  overlay.classList.add('active');
  popup.classList.add('active');
});

// 监听关闭按钮的点击事件
closeBtn.addEventListener('click', function () {
  // 关闭遮罩层和弹出层
  overlay.classList.remove('active');
  popup.classList.remove('active');
});

// 监听遮罩层的点击事件
overlay.addEventListener('click', function () {
  // 关闭遮罩层和弹出层
  overlay.classList.remove('active');
  popup.classList.remove('active');
});

以上是“JS制作带有遮罩弹出层实现登录注册表单特效”的完整攻略。通过以上攻略，我们可以轻易地制作出类似弹出层的效果，从而提高网站的用户体验。