点击弹出登入框html 

/*
        @author:luowen
        @time:2013-08-10
        @desc:点击登入,在页面中心出现一个登入框,并形成遮罩层
<!-- html code -->
<!doctype html>
<html>
<head>
    <meta charset='utf-8'>
    <title></title>
    <link rel="stylesheet" type="text/css" href="pop.css">
    <script type="text/javascript" src="../Jquery.js"></script>
    <script type="text/javascript" src='pop.js'></script>
</head>
<body style="width:3000px;height:3000px;">
    <a href="javascript:;" id="show">登入</a>
    <div class="login">
        <h3>用户登入<span>关闭</span></h3>
        <div class="cont">
            内容部分
        </div>
    </div>
    <div class="mask"></div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
#show{
    width:100%;
    height:30px;
    padding-left: 100px;
    background: #000;
    opacity: .6;
    font:normal 16px '黑体';
    line-height: 30px;
    display: block;
    color: white;
    border-bottom: 2px solid red;
    position: fixed;
    box-shadow: 0px 2px 10px #999;
}
.login{
    width: 300px;
    height: 300px;
    padding: 3px;
    background: #abcdef;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
}
.login h3{
    width: 300px;
    height: 30px;
    font-family: '微软雅黑';
    background: #abcdef;
    line-height: 30px;
}
.login h3 span{
    float: right;
    margin-right: 5px;
    font-size: 14px;
    cursor: pointer;
}
.login h3 span:hover{
    color:red;
}
.cont{
    width: 300px;
    height: 270px;
    background: #fff;
}
.cont input{
    margin: 5px 0;
    border: 1px solid #ccc;
}
.mask{
    background: #000;
    opacity: .6;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    z-index: 1;
}

<!-- js code -->
$(function(){
    var login = $('.login');
    //动态获取文档高宽
    var documentW = $(document).width();
    var documentH = $(document).height();
    function getPos(){
        //浏览器宽度
        var bw = $(window).width();
        //浏览器高度
        var bh = $(window).height();
        //获取纵向滚动条的高度
        var scrollH = $(window).scrollTop();
        //获取横向滚动条
        var scrollL = $(window).scrollLeft();
        //登入框宽度
        var loginW = login.outerWidth(true);
        //登入框高度
        var loginH = login.outerHeight(true);
        
        //定位到中间
        var posW = bw/2 - loginW/2 + scrollL;
        var posH = bh/2 - loginH/2 + scrollH;
        var res = [posW,posH];
        return res;
    }

    $('#show').click(function(){
        //出来遮罩层
        var arr = getPos();
        $('.mask').width(documentW).height(documentH).show();
        //弹出登入框
        login.show().css({'left':arr[0],'top':arr[1]});
        //点击关闭
        $('.login h3 span').click(function(){
            login.hide();
            $('.mask').hide();
        });
    });
    $(window).resize(function(){
        if(login.is(':visible')){
            var arr = getPos();
            login.animate({'left':arr[0],'top':arr[1]},100).dequeue();
        }
    });
    $(window).scroll(function(){
        if(login.is(':visible')){
            var arr = getPos();
            login.animate({'left':arr[0],'top':arr[1]},100).dequeue();
        }
    });
})

 

posted @ 2013-08-10 14:20  arvim  阅读(1819)  评论(0)    收藏  举报