栀子花的gravatar头像
栀子花 2016-03-16 16:58:46

如何实现js弹出一个添加或修改的子窗口,然后提交刷新页面功能?

如何再点击添加或修改的时候,页面显示中间弹出一个添加或修改的子窗口,当添加或修改完成后,点提交,关闭这个窗口,并刷新页面呢?

所有回答列表(1)
最代码-ian的gravatar头像
最代码-ian  LV26 2016年3月17日

1.好可怜,提了几天的问题了都没有人回答,牛币少了点,这样的问题百度有的

2.给你一段我原来写的片段

3.

<!DOCTYPE html>
<html>
  <head>
    <title>用户管理</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../../js/jquery-1.8.2.min.js"></script>
    <link rel="stylesheet" href="../../css/style.css" type="text/css"></link>
    <link rel="stylesheet" href="css/user.css" type="text/css"></link></head>
    
<style>
li {list-style-type:none;}
.mesWindow{position:absolute;margin:50px 50px auto; border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}
.mesWindowContent{margin:4px;font-size:12px;}
</style>
    
<script>
var isIe=(document.all)?true:false;
//设置select的可见状态
function setSelectState(state)
{
var objl=document.getElementsByTagName('select');
for(var i=0;i<objl.length;i++)
{
objl[i].style.visibility=state;
}
}
function mousePosition(ev)
{
if(ev.pageX || ev.pageY)
{
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//弹出方法
function showMessageBox(wTitle,content,pos,wWidth)
{
closeWindow();
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
if(isIe){
setSelectState('hidden');}
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";
back.style.cssText=styleStr;
document.body.appendChild(back);
showBackground(back,50);
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";
styleStr="left:25%;top:60px;position:absolute;width:"+wWidth+"px;";
mesW.style.cssText=styleStr;
document.body.appendChild(mesW);
}
//让背景渐渐变暗
function showBackground(obj,endInt)
{
if(isIe)
{
obj.filters.alpha.opacity+=1;
if(obj.filters.alpha.opacity<endInt)
{
setTimeout(function(){showBackground(obj,endInt)},5);
}
}else{
var al=parseFloat(obj.style.opacity);al+=0.01;
obj.style.opacity=al;
if(al<(endInt/100))
{setTimeout(function(){showBackground(obj,endInt)},5);}
}
}
//关闭窗口
function closeWindow()
{
if(document.getElementById('back')!=null)
{
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null)
{
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
if(isIe){
setSelectState('');}
}
//测试弹出
function testMessageBox(ev)
{
var objPos = mousePosition(ev);
messContent='<form action="useradd_admin.action" method="post"><table align="center" style="margin-top: 20px;"class="td_page2"><tr align="center"><td>用户名:<input type="text" name="user.userName"></td></tr><tr align="center"><td> 密 码 : <input type="text" name="user.passWord"></td></tr><tr align="center"><td><input type="submit" value="确定"> <input type="button" onclick="closeWindow();" title="关闭窗口" class="close" value="取消" /></td></tr></table></form>';
showMessageBox('新增管理员',messContent,objPos,450);
}
</script>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table width="95%" align="center" style="margin-top: 20px;">
  <tr>
    <td class="td_page"><a href="#" onclick="testMessageBox(event);">点击这里</a></td>
  </tr>
</table>
</body>
</html>


  

顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友