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
>
查看全文
相关阅读:
PHP通过日志来发现问题
php环境重启
排行榜的实现
git相关使用技巧和问题
lua State加载部分库
c++ 解析json
查看某个进程允许打开的最大文件描述符
glog安装与使用
ubuntu update-alternatives
gcc安装多个版本
原文地址:https://www.cnblogs.com/coolkiss/p/1361463.html
最新文章
synchronized同步对象锁
判断当前日期是否在[startDate, endDate]区间
利息计算公式
微信小程序获取用户手机号
preg_match
Bootstrap Modals(模态框)
mysql创建utf8数据库
Nginx 多重条件判断
CKEditor5 基本使用
解决在nginx+php环境下$_SERVER['PHP_SELF']获取不到值的问题
热门文章
趣味工具figlet
微信支付结果通知,回调的策略
PHP 高精度比较bccomp
微信小程序发起支付流程
Ubuntu 18 开机启动慢
Linux更改主机名
PHP 手机号中间4位加密
带宽检测工具iftop
清理日志的两个策略
记一次惊心动魄的上线问题
Copyright © 2011-2022 走看看