我的javascript
2007-08-03 20:24:46
通过弹出一个层来屏蔽整个窗体,这个层的大小和窗体当前的大小一致,
背景为透明,而不对窗体本身进行任何的处理。从而达到延时加载和模
式窗体的效果 在弹出的层上面在弹出一个小层,在这个小层上面进行屏
蔽窗体时要进行的具体的操作。点击关闭或者是提交后移除弹出的两个层。
以下是具体实现的一些javascript代码:
function StartGO()
{ var sWidth,sHeight;
sWidth=document.body.offsetWidth; //获取窗体的宽度 sHeight=screen.height; //获取窗体的高度 var bgObj=document.createElement("div"); //申明用来覆盖窗体的层的定义 bgObj.setAttribute('id','bgDiv'); bgObj.style.position="absolute"; if(navigator.appName=="Microsoft Internet Explorer") bgObj.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src=http://www.cnbogs.com/Files/xiaojiangjiang/pass.ico, sizingMethod=scale)"; else bgObj.style.backgroundImage="url(http://www.cnbogs.com/Files/xiaojiangjiang/pass.ico)"; bgObj.style.top="0"; bgObj.style.opacity="40%"; bgObj.style.left="0"; bgObj.style.width="100%"; bgObj.style.height=sHeight + "px"; bgObj.style.zIndex = "10000"; document.body.appendChild(bgObj); var msgBox=document.createElement("div");//申明具体实现的小层 msgBox.setAttribute("id","msgBox1"); msgBox.setAttribute("align","center"); msgBox.style.background="white"; msgBox.style.border="1px solid buttonface"; msgBox.style.position = "absolute"; msgBox.style.left = "50%"; msgBox.style.top = "50%"; msgBox.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; msgBox.style.marginLeft = "-225px" ; msgBox.style.marginTop = -75+document.documentElement.scrollTop+"px"; //if(page=="write"){msgh=300;msgw=500;} msgBox.style.width = "250px"; msgBox.style.height ="100px"; msgBox.style.textAlign = "center"; msgBox.style.lineHeight ="25px"; msgBox.style.zIndex = "10001"; var title=document.createElement("h4"); title.setAttribute("id","msgTitle"); title.setAttribute("align","right"); title.style.margin="0"; title.style.padding="3px"; title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; title.style.opacity="75%"; title.style.background="buttonface"; title.style.border="1px solid buttonface"; title.style.height="18px"; title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; title.style.color="white"; title.style.cursor="pointer"; // 关闭弹出层
title.onclick=function(){ document.body.removeChild(bgObj); document.body.removeChild(msgBox); } title.innerHTML="关闭"; document.body.appendChild(msgBox);
var txt=document.createElement("p"); txt.style.margin="1em 0" txt.setAttribute("id","msgTxt"); //小层的正文部分
txt.innerHTML="<form method='post' action='admin/login.aspx'><table><tr><td>管理员:</td><td><input name='name' type='text' id='name' style=' border-style: none none dotted none;border-width: 1px;'/></td><td></td></tr><tr><td>密 码:</td><td><input name='password' type='password' id='pwd' style=' border-style: none none dotted none;border-width: 1px;'/></td> <td><input name='Button' type='submit' value='提交' /></td></tr></table></form>"; //弹出层
document.getElementById("msgBox1").appendChild(title); // document.getElementById("msgTitle").appendChild(guanbi); document.getElementById("msgBox1").appendChild(txt); } |


dengjiang
博客统计信息
热门文章
最新评论
友情链接