js弹出层居中可移动

《js弹出层居中可移动》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、js弹出层居中可移动

2、rds"CONTENT="">{padding:0px;margin:0px;}#Idiv{width:300px;height:100px;position:absolute;z-index:1000;border:2pxsolid#ffffff;background:#ffffff;}functionshow(){varIdiv=document.getE

3、lementById("Idiv");Idiv.style.display="block";//以下部分要将弹出层居中显示Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/2+document.documentElement.scrollLeft+"px";Idiv.style.top=(document.documentElement.clientHeight-Idiv.clientHeight)/2+document.documentElem

4、ent.scrollTop-50+"px";//此处出现问题，弹出层左右居中，但是高度却不居中，显示在上部分，导致一//部分不可见,于是暂时在下面添加margin-top//以下部分使整个页面至灰不可点击varprocbg=document.createElement("div");//首先创建一个divprocbg.setAttribute("id","mybg");//定义该div的idprocbg.style.background="#000000";procbg.style.width="100%";procbg.style.he

5、ight="100%";procbg.style.position="fixed";procbg.style.top="0";procbg.style.left="0";procbg.style.zIndex="500";procbg.style.opacity="0.6";procbg.style.filter="Alpha(opacity=70)";//以上部分也可以用csstext代替//procbg.style.cssText="background:#000000;width:100%;height:100%;position:

6、fixed;top:0;left:0;zIndex:500;opacity:0.6;filter:Alpha(opacity=70);";//背景层加入页面document.body.appendChild(procbg);document.body.style.overflow="hidden";//取消滚动条//以下部分实现弹出层的拖拽效果varposX;varposY;Idiv.onmousedown=function(e){if(!e)e=window.event;//IEposX=e.clientX-parseInt(Idiv.

7、style.left);posY=e.clientY-parseInt(Idiv.style.top);document.onmousemove=mousemove;}document.onmouseup=function(){document.onmousemove=null;}functionmousemove(ev){if(ev==null)ev=window.event;//IEIdiv.style.left=(ev.clientX-posX)+"px";Idiv.style.top=(ev.clientY-posY)+"px";

8、}}functioncloseDiv()//关闭弹出层{varIdiv=document.getElementById("Idiv");Idiv.style.display="none";do