说到这个问题，100%的前端工程师都遇到过。但是这个问题又是不太好形容，所以对此做解释的人自然很少，这里，我要对这个问题，做一下解释:
HTML：
<div class="arrow_mask"></div>
<div class="arrow-body">
<div class="arrow-body-header">
标题
</div>
<div class="arrow-body-text">
内容介绍
</div>
</div>
CSS:
.arrow_mask {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1600;
background: #333333;
opacity: 0.8;
}
.arrow-body{
display: none;
width: 82%;
height: 362px;
position: absolute;
z-index: 1601;
/* top: 80px; */
background: #ffffff;
border-radius: 8px;
margin-left: 9%;
}
.arrow-body-header{
height: 46px;
line-height: 46px;
color: #FFFFFF;
background: #ee0a3b;
text-align: center;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
font-size: 16px;
}
.arrow-body-text{
font-size: 11px;
color: #333;
}
.text-mes{
margin-top: 10px;
width: 100%;
padding-right: 20px;
padding-left: 20px;
}
.close img{
width: 40px;
height: 40px;
position: absolute;
left: 50%;
margin-left: -20px;
bottom: -20px;
}
JS:
window.onload = function (){
var sightHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var top = (sightHeight-350)/2;
$(".arrow-body").css({
top:top+"px"
});
$(".close").click(function(){
$(".arrow_mask").hide();
$(".arrow-body").hide();
});
}
JS的部分需要简介一下，这里的原理是这样的：
1-通过window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 获取当前页面的可视高度；
2-然后在使用可视高度减去弹框的高度除以二的结果，作为弹框距离顶部的距离。这样不管页面实际高度多长，弹框时钟会在页面的中心。
3-但单击关闭按钮的时候，让弹框隐藏
文章内容如有侵权，请联系我们。
