js實現div彈出層的方法

本文實例講述了js實現div彈出層的方法。分享給大家供大家參考。具體分析如下：

話說現在各種插件出來了要實現彈出層真是太簡單了，但個人有時覺得那些插件不實用經常會找一些純js原生態的東西，下面來給各位分享一個原生太js div彈出層實例，有需要的朋友可一起看看。

這個不用多說了,直接貼代碼吧.有碼有註釋:

複製代碼代碼如下:/*

* 彈出DIV層

*/

function showDiv()

{

var Idiv = document.getElementById("Idiv");

var mou_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";

//以下部分使整個頁面至灰不可點擊

var procbg = 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"; //取消滾動條

//以下部分實現彈出層的拖拽效果

var posX;

var posY;

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;

}

function mousemove(ev)

{

if(ev==null) ev = window.event;//IE

Idiv.style.left = (ev.clientX - posX) + "px";

Idiv.style.top = (ev.clientY - posY) + "px";

}

}

function closeDiv() //關閉彈出層

{

var Idiv=document.getElementById("Idiv");

Idiv.style.display="none";

document.body.style.overflow = "auto"; //恢復頁面滾動條

var body = document.getElementsByTagName("body");

var mybg = document.getElementById("mybg");

body[0].removeChild(mybg);

}

<!--彈出層開始-->

<div id="Idiv" style="display:none; position:absolute; z-index:1000; background:#67a3d9;">

<div id="mou_head"100px; height=10px;z-index:1001; position:absolute;">這個是用來實現拖層</div>

<input type="button" value="關閉" onclick="closeDiv();" />

</div>

<!--結束-->

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

希望本文所述對大家的javascript程序設計有所幫助。