登录弹框 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link href="css/reset.css" type="text/css" rel="stylesheet">
    <link href="css/logReg.css" type="text/css" rel="stylesheet">
    <style>
        .fiiix{
            position:fixed;
            top:0;
        }
    </style>
    <script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<div class="fiiix"><a id="dl" onClick="showDialog()">登录</a></div>
   
</div>
<div class="logC" id="Popout" style="display:none;">
    <div class="locCbg">
        <div class="logBar">
        <span class="iconfont icjy" onClick="hideDialog()">&#xe8e9;</span>
            <h3>登录</h3>
        </div>
        <div class="userLogC">
            <form>
                <div class="logValidation">
                    <div class="logError"><span class="iconfont">&#xe8ea;</span>用户名或者密码错误，请重新输入</div>
                </div>
                <div class="logRow">
                    <label class="logLabel">用户名</label>
                    <input type="text" placeholder="请输入用户名">
                </div>
                <div class="logRow">
                    <label class="logLabel">密码</label>
                    <input type="password" placeholder="请输入密码">
                </div>
                <div class="logRow">
                <input type="button" value="登录">
                </div>
                <div class="logfooter">
                    <ul>
                        <li>
                            <a href="###">忘记密码</a>
                        </li>
                        <li>
                            已经有账号?点击 <a href="###">登录</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="shade" id="shade" style="display:none;">
</div>

<script>
    //获取元素对象
    function g(id){
        return document.getElementById(id);
        }
//元素上下左右居中
    function scrH(){
        var scrollH=document.documentElement.scrollTop || document.body.scrollTop;
        return scrollH;
        }
    
    function elCenter(ele){
        var scWidth=document.documentElement.clientWidth || document.body.clientWidth;
        var scHeight=document.documentElement.clientHeight || document.body.clientHeight;
        var eleWidth=ele.offsetWidth;
        var eleHeight=ele.offsetHeight;
        var scrollH=scrH();
        ele.style.left=(scWidth-eleWidth)/2+'px';
        ele.style.top=(scHeight-eleHeight)/2+scrollH+'px';
        }
// 自动全屏-遮罩
    function shadeWH(shade){
        shade.style.width=document.documentElement.clientWidth+'px' || document.body.clientWidth+'px';
        shade.style.height=document.documentElement.clientHeight+'px' || document.body.clientHeight+'px';
    }
//移除滚动
    function unScroll() {
    var top = $(document).scrollTop();
    $(document).on('scroll.unable',function (e) {
        $(document).scrollTop(top);
    })
}

    //移除禁止
    function removeUnScroll() {
    $(document).unbind("scroll.unable");
    }

 //展现登录浮层
     function showDialog(){
         var scrollH=scrH();
         g('Popout').style.display='block';
         g('Popout').style.top=scrollH+'px'; 
         g('shade').style.display='block';
         g('shade').style.top=scrollH+'px';
         elCenter(g('Popout'));
         shadeWH(g('shade'));
         unScroll();
         }
         
     //隐藏登录浮层
     
     function hideDialog(){
         g('Popout').style.display = 'none';
         g('shade').style.display = 'none';
         removeUnScroll();
         }     
    window.onresize = function(){
        elCenter(g('Popout'));
        shadeWH(g('shade'));
    }
            
</script>
</body>
</html>

html

 

css

/*字体图标*/
@font-face {font-family: "iconfont";
    src: url('font/iconfont.eot'); /* IE9*/
    src: url('font/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('font/iconfont.woff') format('woff'), /* chrome, firefox */
    url('font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

html{
    margin: 0;
    padding:0;
}
body{
    text-align: center;
}
/*log*/
.logo{
    width: 1100px;
    margin: 0 auto;
    text-align: left;
    line-height: 90px;
}
.wzms{
    position:absolute;
    left:43%;
    top:20%;
}
.wzms h1{
    font-size:60px;
    color:#f2f2f2;
}

.logC{
    position:fixed;
    z-index:9999999;
    width: 416px;
    height: 440px;
    background-color:#fff;
    border-radius:10px;
}
.icjy{
    float:right;
    color:#333;
    font-size:30px;
    position:relative;
    top:-22px;
    right:-80px;
    transform:rotate(0deg);
    transition:all .3s ease-out;
}
.icjy:hover{
    cursor:pointer;
    transform:rotate(180deg);
    transition:all .3s ease-out;
}
.locCbg {
    width: 324px;
    height: 350px;
    background-color: #fff;
    position: relative;
    text-align:left;
    left:20px;
    top:0;
    padding:10px 26px 30px 26px;
}
.logBar h3{
    font-size:20px;
    color:#00a5c8;
}
.logRow{
    margin:20px 0 10px 0;
}
.logRow select{
    height:40px;
    line-height:40px;
    border:1px solid #ccc;
    width:112px;
}
.logValidation{
    margin-top:20px;
}
.userLogC .logError{
    background: #FEEEEB;
    border: 1px solid #F15532;
    color: #F15533;
    width:320px;
    padding:6px 8px;
}
.userLogC .logError span{
    margin-right:4px;
}
.logRow .logLabel{
    display:block;
    font-weight:normal;
    margin-bottom:8px;
}
.logRow input{
    height:40px;
    border:1px solid #D7D8D9;
}
.logRow input[type='text'],.logRow input[type='password']{
    padding:0px 10px;
    width:320px;
}
.logRow input[type='text']:focus,.logRow input[type='password']:focus{
    outline:none;
    border:1px solid #00a5c8;
    box-shadow:0px 0px 1px #00a5c8;
}
.logRow input[type='text']:hover,.logRow input[type='password']:hover{
    border:1px solid #00a5c8;
}
.logRow input[type='button']{
    width:320px;
    background: #00a5c8;
    border-color: #00a5c8;
    line-height: 40px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    cursor: pointer
}
.logRow input[type='button']:hover{
    background-color:#33bedb;
    transition:all .3s ease-out;
}
/*reg*/
#regAll{
    padding:50px 0;
    background:#eaf6fd;
}
.regCont{
    width:500px;
    margin:0 auto;
    padding:0 100px;
}
.regBar{
    margin-bottom:52px;
}
.regBar h2{
    font-size:30px;
    text-align:center;
}
.regLog{
    float:right;
    font-size:14px;
    margin-top:22px;
}
.regLog a{
    text-decoration:none;
}
.regLog a:link,.regLog a:visited{
    color:#00a5c8;
}
.userRegC .logRow{
    overflow:hidden;
    zoom:1;
}
.userRegC .logRow .logLabel{
    float:left;
    display:inline-block;
    width:130px;
    text-align:right;
    line-height:34px;
}
.hs{
    color:#C00;
    font-size:20px;
    font-weight:bold;
    margin-left:6px;
    position:relative;
    top:6px;
}
.userRegC .logError{
    background: #FEEEEB;
    border: 1px solid #F15532;
    color: #F15533;
    padding:8px 8px;
    text-align:left;
    width:325px;
    margin-left:144px;
}
.userRegC .logError span{
    margin-right:4px;
}
.userRegC .logRow input[type='button']{
    width:340px;
    background: #00a5c8;
    border-color: #00a5c8;
    line-height: 44px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    cursor: pointer;
    margin-left:130px;
    height:44px;
}
.userRegC .logRow input[type='button']:hover{
    background-color:#33bedb;
    transition:all .3s ease-out;
}
/*log reg Footer*/
.logfooter{
    margin-top:20px;
}
.logfooter ul{
    text-align:center;
}
.logfooter ul li{
    font-size:12px;
    margin-left:12px;
    margin-bottom:6px;
}
.logfooter ul li a{
    text-decoration:none;
}
.logfooter ul li a:link,.logfooter ul li a:visited{
    color:#00a5c8;
}
.logfooter ul li a:hover{
    color:#00a5c8;
}
.logFooterLink{
    margin-top: 46px;
}
.logFooterLink a:link,.logFooterLink a:visited{
    color: #666;
    margin: 0px 12px;
    font-size:16px;
    text-decoration:none;
}
.logFooterLink a:hover{
    color:#00a5c8;
}
.copy{
    font-size: 14px;
    color: #999;
    margin-top: 14px;
}
.shade{
    position:fixed;
    background-color:#000;
    opacity:0.8;
    z-index:9999;
    filter:Alpha(opacity=60);
    top:0;
    left:0;
    bottom:0;
    right:0;
}

 

posted @ 2019-05-21 11:46  前端王者（法师）  阅读(223)  评论(0)  编辑  收藏  举报