js弹出DIV层_CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程

JS弹出DIV层，代码直接可以用

JS 代码：

<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>

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>

CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程 - CSS中国

搜索

热门标签

js弹出DIV层