今天再学习erp的内容时，学习到了在点击添加按钮时，如何让想要添加的内容显示在当前页面，而且不需要跳转页面。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加面板示例</title>
<style>
#addPanel {
display: none;
position: fixed; /* 将position改为fixed */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使用transform来确保在垂直和水平方向上都居中 */
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
z-index: 2;
}
</style>
</head>
<body>
<h1>欢迎来到我的页面</h1>
<button id="addButton">添加</button>
<div id="addPanel">
<form action="处理添加的Servlet路径" method="post">
<label for="itemName">项目名称:</label>
<input type="text" id="itemName" name="itemName">
<!-- 其他表单元素和按钮等 -->
<br>
<input type="submit" value="添加">
</form>
</div>
<script>
document.getElementById('addButton').addEventListener('click', function() {
var addPanel = document.getElementById('addPanel');
addPanel.style.display = (addPanel.style.display === 'block') ? 'none' : 'block';
});
</script>
</body>
</html>
根据实际情况，修改框的位置和大小。
这是这个代码运行出来的结果
标签：报告,50%,addPanel,添加,今日,display,block,页面 From： https://www.cnblogs.com/zjq164/p/17839799.html