<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsp_edit</title>
<style>
.modifydiv,
.adddiv,
.deletediv {
display: none;
position: fixed;
top: 30%;
right: 40%;
border-radius: 10px;
border: solid;
background-color: rgba(78, 122, 242, 0.998);
z-index: 0;
padding: 20px;
color: white;
outline: none;
transition: all 300ms ease-in-out;
}
.active1,
.active3,
.active2 {
display: block;
transition: all 300ms ease-in-out;
z-index: 2;
}
input {
outline: none;
}
input:hover,
input:active {
cursor: pointer;
}
</style>
<script>
//classList.toggle("active1")功能:选项有active1类名则删除,没有则添加该类名,可以实现切换
function togglePopup1() {
document.querySelector("#popup1").classList.toggle("active1");
}
function togglePopup2() {
document.querySelector("#popup2").classList.toggle("active2");
}
function togglePopup3() {
document.querySelector("#popup3").classList.toggle("active3");
}
</script>
</head>
<body>
<input type="button" value="编辑" class="edit" id="modify" onclick="togglePopup1()">
<input type="button" value="删除" class="edit" id="delete" onclick="togglePopup2()">
<input type="button" value="添加+" class="edit" id="add" onclick="togglePopup3()">
<div class="modifydiv" id="popup1">
Id:<input type="text" value="" readonly><br>
姓名:<input type="text"><br>
出生日期:<input type="date"><br>
性别:<input type="radio" name="ssex" value="男">男
<input type="radio" name="ssex" value="女">女<br>
<input type="submit" value="确定">
<input type="button" onclick="togglePopup1()" value="关闭">
</div>
<div class="deletediv" id="popup2">
<p>确认删除吗?</p>
<input type="submit" value="确认">
<input type="button" onclick="togglePopup2()" value="取消">
</div>
<div class="adddiv" id="popup3">
Id:<input type="text" value=""><br>
姓名:<input type="text"><br>
出生日期:<input type="date"><br>
性别:<input type="radio" name="ssex" value="男">男
<input type="radio" name="ssex" value="女">女<br>
<input type="submit" value="确定">
<input type="button" onclick="togglePopup3()" value="关闭">
</div>
</body>
</html>
用HTML和JavaScript实现点击显示和关闭弹窗
最新推荐文章于 2023-11-30 10:33:28 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)