zoukankan html css js c++ java

登录弹框

<!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- 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

html{
    margin: 0;
    padding:0;
}
body{
    text-align: center;
}
/*log*/
.logo{
     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;
     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 {
     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;
    112px;
}
.logValidation{
    margin-top:20px;
}
.userLogC .logError{
    background: #FEEEEB;
    border: 1px solid #F15532;
    color: #F15533;
    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;
    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']{
    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{
    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;
    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;
    325px;
    margin-left:144px;
}
.userRegC .logError span{
    margin-right:4px;
}
.userRegC .logRow input[type='button']{
    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;
}

查看全文

相关阅读:
UVA
UVA
模板——扩展欧几里得算法（求ax+by=gcd的解）
UVA
模板——2.2 素数筛选和合数分解
 模板——素数筛选
 Educational Codeforces Round 46 (Rated for Div. 2)
Educational Codeforces Round 46 (Rated for Div. 2) E. We Need More Bosses
Educational Codeforces Round 46 (Rated for Div. 2) D. Yet Another Problem On a Subsequence
Educational Codeforces Round 46 (Rated for Div. 2) C. Covered Points Count

原文地址：https://www.cnblogs.com/qdwz/p/10898940.html

热门文章
POJ
bryce1010专题训练——树状数组
 HDU
HDU
HDU
2017多校联合第二场
 HDU
HDU
HDU
HDU