今日报告

今天再学习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>

根据实际情况，修改框的位置和大小。

这是这个代码运行出来的结果

 

posted @ 2023-11-17 22:13  周＋⑦  阅读(9)  评论(0)    收藏  举报