点击弹出div层带遮罩可拖动和关闭层
来源:互联网 发布:淘宝同城交易怎么弄 编辑:程序博客网 时间:2024/05/23 01:20
这个以前发布的一款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>
阅读全文
0 0
- 点击弹出div层带遮罩可拖动和关闭层
- 点击div层之外的其他地方关闭弹出层
- 点击 div 弹出层
- 点击对象弹出DIV层菜单可以定时自动关闭
- 拖动、关闭、打开DIV层
- jQuery拖动div,移动div,弹出层
- 点击按钮/文字弹出背景变暗的可拖动的DIV提示层
- 可拖动的div弹出层
- 实现div层的弹出与拖动
- 点击弹出层 ,点击弹出层外区域关闭弹出层,点击关闭关闭弹出层jquery特效
- CSS+JS实现点击文字弹出定时自动关闭的DIV层菜单
- 点击弹出层外区域关闭弹出层jquery特效代码
- js 点击页面其他地方关闭弹出层
- JS点击空白处关闭弹出层
- js 点击页面其他地方关闭弹出层
- js点击空白关闭弹出层
- 点击空白处关闭弹出层
- Javascript弹出带关闭的DIV层
- 从hdfs读数据并转为Map格式
- android 内核出现kernel panic的分析
- vue项目搭建步骤
- [k8s]kube-dns架构图解
- 【jzoj1617】【SCOI2005】【互不侵犯】【状态压缩动态规划】
- 点击弹出div层带遮罩可拖动和关闭层
- 【RTL-SDR】用RTL-SDR实现航班追踪(ADS-B)
- vijos 生日蛋糕
- 数组中单独元素问题
- Revit二次开发建立程序:在类库中添加WPF
- SD卡的控制方法与时序
- Colorful Graph CodeForces
- poj
- Python语法基础01.注释