彈出彈層

時間 2019-11-19

標籤彈出简体版

原文原文鏈接

/**

*/
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" id="layer" onclick="layerClose()">        <div class="layer_text">請先贊成協議</div>    </div>    <img class="bg_top" src="images/bg.png"/>    <div class="bg_bottom">        <div class="text">            <p>線上申請，同步審覈</p>            <p>實時放款，靈活期限</p>            <p>利率優惠低至1.25%/月</p>        </div>        <div class="deal_text">            <span class="checkbox" id="deal" onclick="dealAgree()"></span>            <p class="text_left">                申請即贊成                <a href="http://www.baidu.com"><span>《安金袋用戶服務協議》</span></a>            </p>        </div>        <div class="button" onclick="goto()">馬上申請</div>        <p class="text_bottom">瞭解更多產品信息</p>    </div>    <div class="bottom_person">我的中心</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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。