jsp 修改密码弹窗
时间: 2023-06-28 12:12:03 浏览: 125
JavaScript修改密码验证
4星 · 用户满意度95%
你可以使用以下代码实现一个简单的 JSP 修改密码弹窗:
```
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Change Password</title>
<style>
body {
font-family: Arial;
font-size: 14px;
}
label {
display: block;
margin-bottom: 10px;
}
input[type=text], input[type=password] {
width: 100%;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Change Password</h2>
<form action="change-password.jsp" method="post">
<label for="current-password">Current Password</label>
<input type="password" id="current-password" name="currentPassword" required>
<label for="new-password">New Password</label>
<input type="password" id="new-password" name="newPassword" required>
<label for="confirm-password">Confirm Password</label>
<input type="password" id="confirm-password" name="confirmPassword" required>
<button type="submit">Save Changes</button>
</form>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("openModalBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
```
在上述代码中,使用了 CSS 和 JavaScript 来创建一个弹窗,当用户点击一个按钮时,弹窗会显示出来。用户可以在弹窗中输入当前密码、新密码和确认密码,然后提交表单到 `change-password.jsp` 页面进行密码修改操作。你需要在 `change-password.jsp` 页面中实现密码修改的逻辑。
阅读全文