效果图:
代码如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://www.ltwmsjzx.gov.cn/static_material/source_app/css/common.css"/>
<style>
.pf{position:fixed;}
.TipInfo-pop{width:100%;height:100%;background-color:rgba(0,0,0,0.3);z-index:999;font-size:.14rem;}
.TipInfo-pop .TipInfo-container{top:50%;left:5%;width:90%;background-color:#fff;border-radius:4px;}
.TipInfo-pop .TipInfo-container strong{padding:.2rem 0;display:flex;align-items:center;justify-content:center;font-size:.16rem;font-weight:500;}
.TipInfo-pop .TipInfo-phone{margin-bottom:.2rem;padding:0 .2rem;}
.TipInfo-pop .TipInfo-phone span.phone-num{padding:.1rem 0;color:#aaa;display:flex;justify-content:center;font-size:.15rem;}
.TipInfo-pop .TipInfo-phone p.pr{position:relative;overflow:hidden;border-radius:4px;}
.TipInfo-pop .TipInfo-phone p.pr input{width:100%;height:.3rem;border:1px solid #eee;text-indent:.1rem;border-radius:4px;}
.TipInfo-pop .TipInfo-phone p.pr a.get-phoneCode{top:0;right:-1px;height:.34rem;padding:0 .1rem;position:absolute;background-color:#eee;display:flex;align-items:center;justify-content:center;border-radius:0 4px 4px 0;}
.TipInfo-pop .TipInfo-phone p.pr a.get-again{display:none;}
.TipInfo-pop .get-again i{color:#c20007;}
.TipInfo-pop .TipInfo-footer{border-top:1px solid #eee;display:flex;align-items:center;justify-content:space-between;}
.TipInfo-pop .TipInfo-footer a{line-height:.46rem;flex:1;display:flex;align-items:center;justify-content:center;}
.TipInfo-pop .TipInfo-footer a.get-TipInfo{border-left:1px solid #eee;color:#39a4ff;}
</style>
</head>
<body>
<div class="TipInfo-pop pf">
<div class="TipInfo-container pf">
<strong class="text-c">这是警告信息!</strong>
<div class="TipInfo-phone">
<span class="phone-num">18220506781</span>
<p class="pr">
<input type="text" name="" id="" value="" />
<a class="pa get-phoneCode get-start" href="javascript:;">获取验证码</a>
<a class="pa get-phoneCode get-again" href="javascript:;"></a>
</p>
</div>
<div class="TipInfo-footer">
<a class="close-TipInfo" href="javascript:;">取消</a>
<a class="get-TipInfo" href="javascript:;">确定</a>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="https://www.ltwmsjzx.gov.cn/static_material/public/jquery-3.3.1.min/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var TipInfo_c_h = $('.TipInfo-container').height();
$('.TipInfo-container').animate({
'margin-top':-(TipInfo_c_h/2)
});
$('.TipInfo-pop .close-TipInfo').click(function(){
$('.TipInfo-pop').fadeOut()
});
$('.TipInfo-pop .get-TipInfo').click(function(){
$('.TipInfo-pop').fadeOut()
});
$('.TipInfo-pop').click(function(){
$(this).fadeOut()
});
$('.TipInfo-container').click(function(e){
e.stopPropagation()
});
$('.TipInfo-pop .get-start').click(function(){
$(this).css('display','none');
$('.TipInfo-pop .get-again').css('display','flex');
var time = 10;
$('.TipInfo-pop .get-again').html("<i>"+time+"</i>"+' 秒后重新获取');
var times = setInterval(function(){
time--;
$('.TipInfo-pop .get-again').html("<i>"+time+"</i>"+' 秒后重新获取');
if(time===1){
clearInterval(times);
$('.TipInfo-pop .get-again').css('display','none');
$('.TipInfo-pop .get-start').css('display','flex').text('重新获取');
}
},1000)
})
});
</script>