弹框在一个很的长页面居中显示

2019-05-16


    说到这个问题,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-但单击关闭按钮的时候,让弹框隐藏

0
首页
案例
关于
联系