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>
轉載于:https://www.cnblogs.com/coolkiss/archive/2008/12/24/1361463.html
總結
- 上一篇： 远程控制(3)
- 下一篇： 学习IOS开问题篇--视图的模型控件属性