本文阐述了用js实现div弹出层的方法，供大家参考，具体分析如下：

现在很多类型的外挂出来实现弹出图层实在是太简单了，但是人们有时候觉得那些插件不实用，经常发现一些纯js的自然东西，这里给你分享一个本机js的div弹出例子，有需要的朋友可以看看。

不需要说太多，只要遵守代码就行了。

将代码复制如下：

* div层

* /

showdiv（）函数

{

Var Idiv = document.getelementbyid（idiv ）；

无功mou_head = document.getelementbyid（'mou_head）；

idiv.style.display =块；

下面的部分将弹出/显示中心

idiv。风格。左=（文档。文档元素}。clientwidth idiv。clientwidth）/ 2 +文档。文档元素}。scrollLeft +PX；

idiv.style.top =（文档。文档元素}。自己idiv。自己）/ 2 +文档。文档元素}。scrolltop-50 +PX；



下面的部分使页面点击灰色

无功procbg = document.createelement（div）； / /创建一个div

procbg.setattribute（身份

procbg.style.background =# 000000 ；

procbg.style.width =100%；

procbg.style.height =100%；

procbg.style.position =固定；

procbg.style.top =0；

procbg.style.left =0；

procbg.style.zindex =500；

procbg.style.opacity =0.6；

procbg.style.filter =阿尔法（不透明度70）；

添加页面/背景层

document.body.appendchild（procbg）；

document.body.style.overflow =隐藏； / /取消滚动条



下面的部分实现了弹出/拖动效果

var POSx；

VaR的铭文；

mou_head onmousedown =功能（E）。

{

如果（！E）E = window.event； / / IE

POSx = e.clientx - parseInt（idiv。风格。左）；

波西= e.clienty - parseInt（idiv。风格。顶部）；

document.onmousemove = MouseMove；

}

document.onmouseup =功能（）

{

document.onmousemove = null；

}

函数的MouseMove（EV）

{

如果（EV = = null）EV = window.event； / / IE

idiv.style.left =（ev.clientx -条POSx）+PX；

idiv.style.top =（ev.clienty -波西）+PX；

}

}

功能（closediv） / /关闭弹出层

{

Var Idiv = document.getelementbyid（idiv ）；

idiv。风格。显示为无；

document.body.style.overflow =自动； / /返回页面滚动条

VaR的身体= document.getelementsbytagname（体）；

无功mybg = document.getelementbyid（mybg ）；

体{ 0 }。removechild（mybg）；

}





这是用来实现两层的。







对于一些美化效果，我们可以自己修复和修改。

希望本文能对大家的javaｓｃｒｉｐｔ程序设计有所帮助。