在页面中做“编辑”功能时,往往需要在当前页面出现一个弹出框,页面变成灰色,在弹出框中回显原本的数据,修改后保存至数据库中。具体做法如下:
1.在当前jsp页面书写form表单
form表单的写法、样式等都跟普通的一样,唯独不同的是在form标签中加入display:none
属性。示例:
<a onclick="showLayer(${item.proId})">编辑</a>
<div id="layerBg"></div>
<form id="layer" action="" method="post">
<h3 align="center">项目信息修改</h3><br>
<input style="display: none" type="text" id="proId" name="proId" />
<label>项目名称: </label><input type="text" id="proName" name="proName" />
<input type="submit" value="确认" >
<input type="button" value="取消" onclick="hideLayer()">
</form>
2.css代码
<style type="text/css">
#layer {
display: none;
position: absolute;
z-index:11;
}
#layerBg {
display: none;
position: absolute;
z-index:10;
background:#DCDBDC;
width: 1370px;
height: 920px;
-moz-opacity: 0.8;
opacity:.80;
left:0;
top:0;
}
</style>
其中,
1.<a onclick="showLayer(${item.proId})">编辑</a>
里调用方法showLayer(id)
的参数视情况而定;这里参数主要用于在数据库查询对应的数据,用来做页面回显。
2.proId需要用于后续在数据库中查询数据,但在页面上不需要显示,所以也设置为display:none
3.showLayer(id)方法
<script type="text/javascript">
function showLayer(id) {
$.ajax({
type : "post",
dataType : "json",
url : "${pageContext.request.contextPath }/project/showProjectByProId.action",
data : {
"proId" : id
},
success : function(data) {
var arr = data.project;
$('#proId').val(arr.proId);
$('#proName').val(arr.proName);
},
error : function(data) {
alert("系统错误");
}
});
$('#layer').css({"display": "block"});
return false;
}
</script>
4.hideLayer()方法
<script type="text/javascript">
function hideLayer() {
$('#layer').css({"display": "none"});
window.location.reload();
}
</script>