博客

点击弹出div层带遮罩可拖动和关闭层

  • Post author:
  • Post category:其他



这个以前发布的一款js弹出层基础进行升级带遮罩效果并且可以拖曳拖动，也可以关闭弹出层



http://www.niutw.com/view/147.html





1.


[图片]

效果图



2.


[代码]

代码



跳至


[2]



[全屏预览]




?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

<!DOCTYPE html PUBLIC


"-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"


>

<HTML>

<HEAD>

<TITLE>JS弹出层居中带遮罩并可拖动——爱微网TITLE>

<meta http-equiv=


"Content-Type"


content=


"text/html; charset=utf-8"


/>

<META NAME=


"Author"


CONTENT=


"爱微网"


>

<META NAME=


"Keywords"


CONTENT=


"js弹出层,js拖曳"


>

<META NAME=


"Description"


CONTENT=


"JS弹出层居中带遮罩并可拖动"


>

<style type=


"text/css"


>

*

{

padding:0px;

margin:0px;

}

#popupdiv

{

width:300px;

height:100px;

position:absolute;

z-index:1000;

border:2px solid


#ffffff;

background:url(http:


//www.iiwnet.com/images/bg.png) #ffffff;

}

</style>

<script langue=


"javascript"


>

function


show(popupdiv)

{

var


Idiv=document.getElementById(popupdiv);

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)"


;

//以上部分也可以用csstext代替

// procbg.style.cssText="background:#000000;width:100%;height:100%;position:fixed;top:0;left:0;zIndex:500;opacity:0.6;filter:Alpha(opacity=70);";

//背景层加入页面

document.body.appendChild(procbg);

document.body.style.overflow =


"hidden"


;


//取消滚动条

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

var


posX;

var


posY;

Idiv.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(popupdiv)


//关闭弹出层

{

var


Idiv=document.getElementById(popupdiv);

Idiv.style.display=


"none"


;

document.body.style.overflow =


"auto"


;


//恢复页面滚动条

var


body = document.getElementsByTagName(


"body"


);

var


mybg = document.getElementById(


"mybg"


);

body[0].removeChild(mybg);

}

</script>

</HEAD>

<body>

<div><a href=


"javascript:void(0)"


id=


"show"


onclick=


"show('popupdiv')"


>点击打开弹出层！</a></div>

<div id=


"popupdiv"


style=


"display:none;"


>

<a href=


"javascript:void(0)"


onclick=


"closeDiv('popupdiv')"


>点击关闭层</a>

</div>

</body>

</HTML>