这个以前发布的一款js弹出层基础进行升级带遮罩效果并且可以拖曳拖动,也可以关闭弹出层
http://www.niutw.com/view/147.html
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>
|