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>

你可能感兴趣的:(div)