javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
本文实例讲述了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法。分享给大家供大家参考。具体分析如下:
这里点击按钮后,弹出一个可关闭的层窗口,随之网页背景变灰,在QQ网站上经常会看到QQ登录的效果,就和这个很类似,代码段基于JavaScript,根据你的情况使用,有时候是用CSS完成的这种功能。
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>弹出一个层,页面变灰</title> <scriptlanguage="javascript"> functionalertWin(title,msg,w,h){ vartitleheight="23px";//窗口标题高度 varbordercolor="#336699";//提示窗口的边框颜色 vartitlecolor="#FFFFFF";//窗口标题颜色 vartitlebgcolor="#336699";//窗口标题背景色 varbgcolor="#FFFFFF";//提示内容的背景色 variWidth=document.documentElement.clientWidth; variHeight=document.documentElement.clientHeight; varbgObj=document.createElement("div"); bgObj.style.cssText="position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight,iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;"; document.body.appendChild(bgObj); varmsgObj=document.createElement("div"); msgObj.style.cssText="position:absolute;font:11px'宋体';top:"+(iHeight-h)/2+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1pxsolid"+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;"; document.body.appendChild(msgObj); vartable=document.createElement("table"); msgObj.appendChild(table); table.style.cssText="margin:0px;border:0px;padding:0px;"; table.cellSpacing=0; vartr=table.insertRow(-1); vartitleBar=tr.insertCell(-1); titleBar.style.cssText="width:100%;height:"+titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold13px'宋体';color:"+titlecolor+";border:1pxsolid"+bordercolor+";cursor:move;background-color:"+titlebgcolor; titleBar.style.paddingLeft="10px"; titleBar.innerHTML=title; varmoveX=0; varmoveY=0; varmoveTop=0; varmoveLeft=0; varmoveable=false; vardocMouseMoveEvent=document.onmousemove; vardocMouseUpEvent=document.onmouseup; titleBar.onmousedown=function(){ varevt=getEvent(); moveable=true; moveX=evt.clientX; moveY=evt.clientY; moveTop=parseInt(msgObj.style.top); moveLeft=parseInt(msgObj.style.left); document.onmousemove=function(){ if(moveable){ varevt=getEvent(); varx=moveLeft+evt.clientX-moveX; vary=moveTop+evt.clientY-moveY; if(x>0&&(x+w<iWidth)&&y>0&&(y+h<iHeight)){ msgObj.style.left=x+"px"; msgObj.style.top=y+"px"; } } }; document.onmouseup=function(){ if(moveable){ document.onmousemove=docMouseMoveEvent; document.onmouseup=docMouseUpEvent; moveable=false; moveX=0; moveY=0; moveTop=0; moveLeft=0; } }; } varcloseBtn=tr.insertCell(-1); closeBtn.style.cssText="cursor:pointer;padding:2px;background-color:"+titlebgcolor; closeBtn.innerHTML="<spanstyle='font-size:15pt;color:"+titlecolor+";'>×</span>"; closeBtn.onclick=function(){ document.body.removeChild(bgObj); document.body.removeChild(msgObj); } varmsgBox=table.insertRow(-1).insertCell(-1); msgBox.style.cssText="font:10pt'宋体';"; msgBox.colSpan=2; msgBox.innerHTML=msg; //获得Event对象,用于兼容IE和FireFox functiongetEvent(){ returnwindow.event||arguments.callee.caller.arguments[0]; } } </script> </head> <body> <inputtype="button"value="点这里" onclick="alertWin('点击弹出可关闭的层窗口,网页变灰',290,208);"/> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。