js弹出DIV层

最新推荐文章于 2025-06-13 14:41:51 发布

转载最新推荐文章于 2025-06-13 14:41:51 发布 · 451 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/coolkiss/archive/2008/12/24/1361463.html

文章标签：

#javascript #ViewUI

备忘。。

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>

<title>javascript_test</title>

body

{

}{

font-size:14px;

margin:0;

padding:0;

}

}{

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>

</head>

<body>

</div>

用户名：<input type="text" id="UserName" />密码：<input type="password" id="UserPwd" />

</div>

</body>

</html>

转载于:https://www.cnblogs.com/coolkiss/archive/2008/12/24/1361463.html