弹出弹层 - 爱码网

/**

*/
html, body, div, img, span, object, iframe, a, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    max-width: 750px;
    min-width: 320px;
    margin: 0 auto;
    font-family: PingFangSC-Regular;
}
a {
    text-decoration: none;
}

.content {
    color: #4a4a4a;
    font-size: 0.28rem;
    text-align: center;
}
.layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
}
.close{
    display: none;
}
.layer_text {
    position: absolute;
    border-radius: 0.2rem;
    background-color: rgba(0, 0, 0, 0.8);
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 1rem;
    line-height: 1rem;
    width: 4rem;
    color: #fff;
    font-size: 0.4rem;
}
.bg_top {
    width: 100%;
    height: auto;
}
.bg_bottom{
    background: #fde0c0;
    margin-top: -0.2rem;
}
.text {
    padding: 0.4rem 0;
    font-size: 0.3rem;
}

.text p{
    line-height: 0.4rem;
}

.deal_text {
    margin: 0 0 0.6rem 1rem;
}

/*复选框样式 <-- start --> */

.checkbox,
.checkbox_checked {
    float: left;
    border: 1px solid #e9c799;
    -webkit-border: 1px solid #e9c799;
    -moz-border: 1px solid #e9c799;
    -ms-border: 1px solid #e9c799;
    -o-border: 1px solid #e9c799;
    border-radius: 0.1rem;
    margin-right: 6px;
}

.checkbox {
    padding: 0.18rem;
    line-height: 1.2rem;
}

.checkbox_checked {
    width: 0.36rem;
    height: 0.36rem;
    background: url("../images/checkd.png") center no-repeat;
    background-size: 100% 100%;
    border-radius: 0.1rem;
}
/* <-- end --> */

.text_left,
.box {
    float: left;
    line-height: 0.4rem;
    color: #9b9b9b;
}
.text_left span {
    color: #6b9cde;
}
.button {
    background: #b46c20;
    height: 0.96rem;
    width: 4.5rem;
    border-radius: 0.8rem;
    text-align: center;
    margin: 0 auto;
    font-size: 0.4rem !important;
    line-height: 0.96rem !important;
    color: #fff;
}
.text_bottom {
    color: #6b9cde;
    padding: 0.5rem 0;
}
.bottom_person {
    position: fixed;
    background: url(../images/person.png) no-repeat 6% #7e7060;
    background-size: auto 90%;
    border-radius: 0.1rem;
    bottom: 0.2rem;
    right: 0.1rem;
    width: 1.84rem;
    height: 0.48rem;
    line-height: 0.48rem;
    padding-left: 10px;
    color: #fff;
    z-index: 1000;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>安金袋</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="Content-Type" content="text/html">
    <meta content="width=device-width,minimum-scale=1.00001,maximum-scale=1.00001,user-scalable=no" name="viewport">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="telephone=no" name="format-detection">
    <!-- UC默认竖屏 ，UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <!-- QQ强制竖屏 QQ强制全屏 -->
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <meta name="format-detection" content="email=no"/>
    <meta name="msapplication-tap-highlight" content="no">
    <link rel="shortcut icon" href="http://m.pingan.com/favicon.ico">
    <!--<link href="css/jquery.fullPage.css" rel="stylesheet">-->
    <link rel="stylesheet" href="style/style.css">
    <!--<script src="js/jquery-1.8.3.min.js"></script>-->
    <!--<script src="js/jquery.fullPage.min.js"></script>-->
</head>
<body class="content">
    <div class="layer close" >个人中心</div>
</body>

<script>
    var oHtml = document.documentElement;
    getSize();
    window.onresize = function(){
        getSize();
    };
    var isAgree = false;
    var open = document.getElementById('layer');
    // px转rem
    function getSize(){
        var screenWidth = oHtml.clientWidth;
        if (screenWidth < 320) {
            oHtml.style.fontSize = '42.6667px';
        } else if(screenWidth > 750){
            oHtml.style.fontSize = '100px';
        }else{
            oHtml.style.fontSize = screenWidth/(750/100) + 'px';
        }
    }
    // 同意协议box样式
    function dealAgree(){
        isAgree = !isAgree;
        var deal = document.getElementById('deal');
        if(isAgree){
            deal.className = 'checkbox_checked' ;
        } else {
            deal.className = 'checkbox';
        }
    }
    // 立即申请
    function goto() {
        if (isAgree) {
            window.location.href = 'http://www.baidu.com';
        } else {
            open.className = 'layer';
        }
    }
    // 取消弹层
    function layerClose(){
        open.className = 'layer close';
    }

</script>
</html>