快捷導(dǎo)航

js實(shí)現(xiàn)div彈出層的方法

更新時(shí)間：2014年11月20日 12:03:38 投稿：shichen2014

這篇文章主要介紹了js實(shí)現(xiàn)div彈出層的方法,以實(shí)例的形式完整的實(shí)現(xiàn)了js彈出div層的效果,并且彈出層可拖拽、可關(guān)閉,用戶還可根據(jù)個(gè)人喜好自定義彈出層的顯示效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

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

話說現(xiàn)在各種插件出來了要實(shí)現(xiàn)彈出層真是太簡(jiǎn)單了，但個(gè)人有時(shí)覺得那些插件不實(shí)用經(jīng)常會(huì)找一些純js原生態(tài)的東西，下面來給各位分享一個(gè)原生太js div彈出層實(shí)例，有需要的朋友可一起看看。

這個(gè)不用多說了,直接貼代碼吧.有碼有注釋:

復(fù)制代碼代碼如下:

/*
* 彈出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";

//以下部分使整個(gè)頁面至灰不可點(diǎn)擊
var procbg = document.createElement("div"); //首先創(chuàng)建一個(gè)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"; //取消滾動(dòng)條

//以下部分實(shí)現(xiàn)彈出層的拖拽效果
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() //關(guān)閉彈出層
{
var Idiv=document.getElementById("Idiv");
Idiv.style.display="none";
document.body.style.overflow = "auto"; //恢復(fù)頁面滾動(dòng)條
var body = document.getElementsByTagName("body");
var mybg = document.getElementById("mybg");
body[0].removeChild(mybg);
}

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

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: