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>