JSP实现弹出登陆框以及阴影效果

要实现JSP弹出登录框和阴影效果，需要分为以下几个步骤：

步骤一：创建HTML页面

首先，我们需要创建一个HTML页面，该页面包含两个部分：登录界面和遮罩层。登录部分包括用户名、密码、登录和取消按钮，遮罩层可以防止用户在操作登录界面之外的内容。

HTML代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Login</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<button id="loginBtn">登录</button>

<div id="mask">
  <div id="login">
    <h2>欢迎登录</h2>
    <form>
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username" required>

      <label for="password">密码：</label>
      <input type="password" id="password" name="password" required>

      <button type="submit">登录</button>
      <button type="button" id="cancelBtn">取消</button>
    </form>
  </div>
</div>

<script src="js/main.js"></script>

</body>
</html>

步骤二：使用CSS设置样式

接下来，我们需要使用CSS设置样式。对于登录和遮罩层，我们需要设置它们的宽度、高度、位置、颜色和透明度等属性。此外，我们还需要为登录按钮添加样式以实现悬停效果和鼠标指针形状。

CSS代码如下所示：

#loginBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#loginBtn:hover {
  background: #0069d9;
}

#mask {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

#login {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 400px;
  height: 320px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px #333;
}

#login h2 {
  text-align: center;
}

#login form {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#login label {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.2rem;
}

#login input[type=text],
#login input[type=password] {
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  margin-bottom: 20px;
  font-size: 1.2rem;
}

#login button[type=submit] {
  padding: 10px 20px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  align-self: center;
}

#login button[type=submit]:hover {
  background: #0069d9;
}

#login #cancelBtn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 8px 15px;
  background: #efefef;
  color: #333;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#login #cancelBtn:hover {
  background: #ddd;
}

步骤三：使用JavaScript实现弹出和关闭效果

最后，我们需要使用JavaScript实现登录框的弹出和关闭效果。我们可以使用设置样式的方式，利用getElementById()获取所需元素后，修改其display属性实现弹出或关闭。

JavaScript代码如下所示：

var mask = document.getElementById("mask");
var loginBtn = document.getElementById("loginBtn");
var cancelBtn = document.getElementById("cancelBtn");

loginBtn.onclick = function() {
  mask.style.display = "block";
}

cancelBtn.onclick = function() {
  mask.style.display = "none";
}

以上就是使用JSP实现弹出登录框以及阴影效果的完整攻略。示例代码可以在我的GitHub仓库中找到，链接为：https://github.com/MrMYH/JSP-Login-Box-With-Shadow

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JSP实现弹出登陆框以及阴影效果 - Python技术站

JSP实现弹出登陆框以及阴影效果

步骤一：创建HTML页面

步骤二：使用CSS设置样式

步骤三：使用JavaScript实现弹出和关闭效果

相关文章