js弹出DIV层 ()
<script>
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;
}
</script>
<!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>
