zoukankan
html css js c++ java
js弹出DIV层
备忘。。
js代码
/**/
/*
*
* @author Administrator
*/
var
ModalOpacity
=
0
;
var
th1;
var
width
=
0
;
var
height
=
0
;
var
right,top;
var
mousePos;
document.onmousemove
=
mouseMove;
function
mouseMove(ev)
{
ev
=
ev
||
window.event;
mousePos
=
mouseCoords(ev);
}
function
mouseCoords(ev)
{
if
(ev.pageX
||
ev.pageY)
{
return
{x:ev.pageX, y:ev.pageY}
;
}
return
{
x:ev.clientX
+
document.body.scrollLeft
-
document.body.clientLeft
y:ev.clientY
+
document.body.scrollTop
-
document.body.clientTop
}
;
}
function
ShowModal(Type)
{
switch
(Type)
{
case
"
login
"
:ShowLogin();
break
;
case
"
regist
"
:ShowRegist();
break
;
}
}
function
ShowLogin()
{
var
modal
=
document.getElementById(
'
Modal
'
);
if
(modal.style.display
==
"
block
"
)
{
return
false
;
}
modal.style.display
=
"
block
"
;
modal.onmousemove
=
mouseMove;
var
e
=
window.event;
if
(
!
document.all)
{
right
=
document.body.clientWidth
-
mousePos.x
+
20
;
top
=
mousePos.y
+
10
;
}
else
{
right
=
document.body.clientWidth
-
document.documentElement.scrollLeft
-
e.clientX
+
20
;
top
=
document.documentElement.scrollTop
+
e.clientY
+
10
;
}
modal.style.right
=
right
+
"
px
"
;
modal.style.top
=
top
+
"
px
"
;
th1
=
setInterval(
"
ShowLoginModal()
"
,
1
);
}
function
ShowLoginModal()
{
var
modal
=
document.getElementById(
'
Modal
'
);
width
+=
20
;
height
+=
3
;
modal.style.width
=
width
+
"
px
"
;
modal.style.height
=
height
+
"
px
"
;
ModalOpacity
+=
5
;
modal.style.filter
=
"
Alpha(opacity=
"
+
ModalOpacity
+
"
)
"
;
//
透明度逐渐变大
modal.style.opacity
=
ModalOpacity
/
100;
//
兼容FireFox
if
(ModalOpacity
>
100
)
{
document.getElementById(
'
Form
'
).style.display
=
"
block
"
;
clearInterval(th1);
}
}
function
CloseDiv()
{
var
modal
=
document.getElementById(
'
Modal
'
);
var
Form
=
document.getElementById(
'
Form
'
);
modal.style.display
=
"
none
"
;
modal.style.height
=
0
+
"
px
"
;
modal.style.width
=
0
+
"
px
"
;
modal.style.opacity
=
0
;
Form.style.display
=
"
none
"
;
height
=
0
;
width
=
0
;
ModalOpacity
=
0
;
right
=
0
;
top
=
0
;
}
html页面
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
>
<
html
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=UTF-8"
>
<
title
>
javascript_test
</
title
>
<
style
type
="text/css"
>
body
{
}
{
font-size
:
14px
;
margin
:
0
;
padding
:
0
;
}
a
{
}
{
margin-left
:
15px
;
}
a:link,a:visited
{
}
{
text-decoration
:
none
;
color
:
black
;
}
a:hover
{
}
{
text-decoration
:
underline
;
color
:
red
;
}
#menu
{
}
{
float
:
left
;
text-align
:
right
;
padding
:
10px 20px
;
width
:
970px
;
line-height
:
30px
;
}
#Modal
{
}
{
position
:
absolute
;
background-color
:
#DFDFE1
;
z-index
:
10000
;
border
:
1px dotted red
;
filter
:
alpha(opacity:0)
;
opacity
:
0
;
display
:
none
;
}
#UserName,#UserPwd
{
}
{
width
:
90px
;
}
#Form
{
}
{
margin-top
:
20px
;
margin-left
:
10px
;
display
:
none
;
}
</
style
>
<
script
type
="text/javascript"
language
="JavaScript"
src
="OpenModal.js"
></
script
>
</
head
>
<
body
>
<
div
id
="menu"
>
<
a
href
="javascript:void(0)"
onclick
="ShowModal('login');"
>
登陆
</
a
>
<
a
href
="javascript:void(0)"
onclick
="ShowModal('regist');"
>
注册
</
a
>
</
div
>
<
div
id
="Modal"
>
<
div
id
="Form"
>
用户名:
<
input
type
="text"
id
="UserName"
/>
密码:
<
input
type
="password"
id
="UserPwd"
/>
<
input
type
="button"
id
="login"
value
="登陆"
/>
<
input
type
="button"
id
="close"
onclick
="CloseDiv()"
value
="关闭"
/>
</
div
>
</
div
>
</
body
>
</
html
>
查看全文
相关阅读:
HDU 6103 Kirinriki【尺取法】【思维题】【好题】
HDU 6103 Kirinriki【尺取法】【思维题】【好题】
HDU 6095 Rikka with Competition【阅读题】【水题】
HDU 6095 Rikka with Competition【阅读题】【水题】
HDU 2844 Coins[【经典题】【模板题】
HDU 2844 Coins[【经典题】【模板题】
HDU 6090 Rikka with Graph【思维题】
HDU 6090 Rikka with Graph【思维题】
Codeforces Round #318(Div. 1) 573 D. Bear and Cavalry【dp+矩阵+线段树优化】
Codeforces Round #318(Div. 1) 573 D. Bear and Cavalry【dp+矩阵+线段树优化】
原文地址:https://www.cnblogs.com/coolkiss/p/1361463.html
最新文章
hdu 1520 树形dp
hdu 3409 最短路树+树形dp
UVa 11796 计算几何
LA 3263 欧拉定理
UVa 11178计算几何 模板题
zoj 2706 线段树
zoj 3365 灵活数字规律
zoj 2404 最小费用流
zoj 2836 容斥原理
hdu 3357 水题
热门文章
找不到TABCTL32.OCX
web入侵基础篇
offic2003静默安装版
3389爆破DUBrute_2.1
【3389】俄远程桌面多端口爆破
【美化】去除快捷方式小箭头
Internet Explorer的锁定
IP寻址技术简介
Win,官方下载磁力链接
将压缩包文件(RAR/7Z/zip等格式)隐藏到图片(JPG格式)的超级简单方法
Copyright © 2011-2022 走看看