js实现div弹出层的方法
本文实例讲述了js实现div弹出层的方法。分享给大家供大家参考。具体分析如下：
话说现在各种插件出来了要实现弹出层真是太简单了，但个人有时觉得那些插件不实用经常会找一些纯js原生态的东西，下面来给各位分享一个原生太jsdiv弹出层实例，有需要的朋友可一起看看。
这个不用多说了,直接贴代码吧.有码有注释:
/*
*弹出DIV层
*/
functionshowDiv()
{
varIdiv =document.getElementById("Idiv");
varmou_head=document.getElementById('mou_head');
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.documentElement.scrollTop-50+"px";
//以下部分使整个页面至灰不可点击
varprocbg=document.createElement("div");//首先创建一个div
procbg.setAttribute("id","mybg");//定义该div的id
procbg.style.background="#000000";
procbg.style.width="100%";
procbg.style.height="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)";
//背景层加入页面
document.body.appendChild(procbg);
document.body.style.overflow="hidden";//取消滚动条
//以下部分实现弹出层的拖拽效果
varposX;
varposY;
mou_head.onmousedown=function(e)
{
if(!e)e=window.event;//IE
posX=e.clientX-parseInt(Idiv.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;//IE
Idiv.style.left=(ev.clientX-posX)+"px";
Idiv.style.top=(ev.clientY-posY)+"px";
}
}
functioncloseDiv()//关闭弹出层
{
varIdiv=document.getElementById("Idiv");
Idiv.style.display="none";
document.body.style.overflow="auto";//恢复页面滚动条
varbody=document.getElementsByTagName("body");
varmybg=document.getElementById("mybg");
body[0].removeChild(mybg);
}
<!--弹出层开始-->
<divid="Idiv"style="display:none;position:absolute;z-index:1000;background:#67a3d9;"> <divid="mou_head"style="width="100px;height=10px;z-index:1001;position:absolute;">这个是用来实现拖层</div> <inputtype="button"value="关闭"onclick="closeDiv();"/> </div> <!--结束-->