JS弹出层来对表单数据进行编辑

Jsp中forEach循环显示的数据在进行编辑时可用弹出层的方法，将原来的数据传递到输入框中，经用户修改后提交。

1.首先是弹出层的内容，display值为none即不显示出来

<div id="divCenter" align="center"
style="position: absolute; width:400px; height:250px; top: 210px; left: 180px; border-style:double; z-index: 3; display:none; background-color:#D8F0F7;">
<div id="title"
style="background-color: #00ccff; cursor: move; height: 20px; font-size: 12px; padding-top: 5px; padding-left: 10px;">
弹出层测试
</div>
<form id="updateId" action="" onsubmit="return check()" method=post>
<br><br><font size="-1" color="black">字段1：</font>
<input name="keywordUpdate" id="keywordUpdate" value="">
<br><font size="-1" color="black">字段2：</font>
<input name="phoneUpdate" id="phoneUpdate" value="">
<br><br><input class=button type="submit" value="保存">
<input class=button type="button" value="取消"
onClick="javascript:document.all.divCenter.style.display='none';">
</form>
</div>

2.在forEach循环中的编辑链接设置为显示出弹出层，并将弹出层中输入框的内容设置为当前列的数据

<c:forEach items="${request.conList}" var="list">
<DIV class=kw>
<DIV class=item>
<SPAN style="FONT-SIZE:16px">字段1：${list.term}</SPAN>
</DIV>
</DIV>
<DIV class=kw>
<DIV class=item>
<SPAN style="FONT-SIZE:16px">字段2：${list.phone}</SPAN>
</DIV>
</DIV>
<DIV style="TEXT-ALIGN: right; MARGIN: 15px 50px 0px">
<INPUT id=updateButton size="5px" value="编辑" class=button type="button"
onClick="javascript:document.all.divCenter.style.display='block';
document.all.keywordUpdate.value='${list.term}';
document.all.phoneUpdate.value='${list.phone}';
document.all.updateId.action='fun/qwyj/qwyj_conUpdate?updateId=${list.id}';">
<INPUT id=deleteButton size="5px" value="删除" class=button type="button"
onclick="if(confirm('你确认删除吗？'))
{window.location='fun/qwyj/qwyj_conDelete?id=${list.id}';return true;}return false;">
</DIV>
</c:forEach>

3.设置弹出层的位置，并将弹出层设置为可移动

根据当前屏幕的大小，将弹出层放置在屏幕中央

<script language="JavaScript">
document.getElementById('divCenter').style.left = (document.body.offsetWidth - 540) / 2;
document.getElementById('divCenter').style.top = (document.body.offsetHeight - 170) / 2 + document.body.scrollTop;
</script>

将弹出层设置为可移动的层

<script type="text/javascript">
var posX;
var posY;
fdiv = document.getElementById('divCenter');
document.getElementById('title').onmousedown=function(e){
if(!e)
e = window.event;
posX = e.clientX - parseInt(fdiv.style.left);
posY = e.clientY - parseInt(fdiv.style.top);
document.onmousemove = mousemove;
}
document.onmouseup = function(){
document.onmousemove = null;
}
function mousemove(ev){
if(ev==null)
ev = window.event;
fdiv.style.left = (ev.clientX - posX) + "px";
fdiv.style.top = (ev.clientY - posY) + "px";
}
</script>

弹出层效果显示如图：