弹出弹层
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弹出弹层相关的知识，希望对你有一定的参考价值。
/**
*/
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>
以上是关于弹出弹层的主要内容，如果未能解决你的问题，请参考以下文章