javascript实现弹出登陆框效果

  • 先来看看效果吧
  1. 初始情况下

　　　　　　

　　2.点击登陆按钮

　　　　　　

　　 3.点击close按钮，或者单击灰色区域后，登陆窗口会消失。

  • html结构
<body>
    <span class="btn" id="BTN">login</span>
</body>
  • css样式
*{
        margin: 0;
        padding: 0;
}
        .btn{
            position: absolute;
            top: 50px;
            right: 100px;
            display: block;
            width: 100px;
            height: 50px; 
            background-color: #ccc;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
        }
        #login{
            z-index: 3;
            width: 500px;
            height: 500px;
            border: 1px solid #fff;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #ccc;
        }
        .close{
            position: absolute;
            top: 10px;
            right: 20px;
            display: block;
            width: 80px;
            height: 40px;border: 1px solid #666;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
        }
        #BG{
            background-color: rgba(0,0,0,0.6);
            z-index: 2;
        }
  • javascript代码
<script type="text/javascript">    
        function openlogin(){    
            var sWidth=window.screen.width;
            var sHeight=window.screen.height;

            var BG = document.createElement("div");
                BG.id = "BG";
                BG.style.height=sHeight + "px";
                BG.style.width=sWidth + "px";
                document.body.appendChild(BG);
            var login = document.createElement("div");
                login.id="login";
                login.innerHTML = "<span class='close' id='CLOSE'>close</span>";
                document.body.appendChild(login);
            var close = document.getElementById("CLOSE");
                close.onclick  =  BG.onclick = function(){
                    document.body.removeChild(BG);
                    document.body.removeChild(login);
                };
        };

        window.onload = function(){
            var btn = document.getElementById("BTN");
            btn.onclick=function(){
                openlogin();
                return false;
            }
        }
</script>

 

至此，弹出登陆框的效果基本实现。

posted @ 2016-05-21 11:06  zhuyinxiaozi  阅读(2458)  评论(0)  编辑  收藏  举报