2024年4月16日发(作者：)

话说现在各种插件出来了要实现弹出层真是太简单了，但个人有时觉得那些插件不实用

经常会找一些纯js原生态的东西，下面来给各位分享一个原生太js div弹出层实例，有需要

的朋友可一起看看。

这个不用多说了,直接贴代码吧.有码有注释:

代码如下:

/*

* 弹出DIV层

*/

function showDiv()

{

var Idiv = mentById("Idiv");

var mou_head = mentById('mou_head');

y = "block";

//以下部分要将弹出层居中显示

=(Width)/2+nt

Left+"px";

=(Height)/2+

ollTop-50+"px";

//以下部分使整个页面至灰不可点击

var procbg = Element("div"); //首先创建一个div

ribute("id","mybg"); //定义该div的id

ound = "#000000";

= "100%";

= "100%";

on = "fixed";

= "0";

= "0";

= "500";

y = "0.6";

= "Alpha(opacity=70)";

//背景层加入页面

Child(procbg);

ow = "hidden"; //取消滚动条

//以下部分实现弹出层的拖拽效果

var posX;

var posY;

mou_edown=function(e)

{

if(!e) e = ; //IE

posX = X - parseInt();

posY = Y - parseInt();

emove = mousemove;

}

eup = function()

{

emove = null;

}

function mousemove(ev)

{

if(ev==null) ev = ;//IE

= (X - posX) + "px";

= (Y - posY) + "px";

}

}

function closeDiv() //关闭弹出层

{

var Idiv=mentById("Idiv");

y="none";

ow = "auto"; //恢复页面滚动条

var body = mentsByTagName("body");

var mybg = mentById("mybg");

body[0].removeChild(mybg);

}

<!--弹出层开始-->

<div id="Idiv" style="display:none; position:absolute; z-index:1000;

background:#67a3d9;">

<div id="mou_head" style="width="100px; height=10px;z-index:1001;

position:absolute;">这个是用来实现拖层</div>

<input type="button" value="关闭" onclick="closeDiv();" />

</div>

<!--结束-->

至于一些美化效果，大家可以自己去修修改改了。

更多信息请查看IT技术专栏