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

说到这个问题，100%的前端工程师都遇到过。但是这个问题又是不太好形容，所以对此做解释的人自然很少，这里，我要对这个问题，做一下解释，以一个实际的例子引出话题，分析问题。下面先看下，在各种机型上支持的效果。

Nexus 5X

---

iphone6

---

Galaxy note3

---

Ipad

---

iphone6 plus

接下来就是代码部分了：

HTML

---

<!--弹框--><div class="arrow_mask"></div><div class="arrow-body">    <div class="arrow-body-header">        萌店火拼节拼团规则    </div>    <div  class="arrow-body-text">       <div class="text-mes">           1、活动时间：2016年11月7日10点至2016年11月14日10点。其中，2016年11月10日22点至2016年11月14日10点为活动正式开抢时间，其余时间用户可抢先收藏活动商品，提前了解“11.11萌店火拼节”活动价。       </div>        <div class="text-mes">           2、活动期间一个用户ID所获红包同一订单均不可叠加使用。红包不适用于秒杀团。红包具体使用规则可以进入萌店app“萌团长-卡券”查看，红包一经使用概不退回。        </div>        <div class="text-mes">            3、红包活动仅面向萌店普通消费者，在获取和使用红包过程中，若出现违规行为（如作弊领取、恶意套取等），萌店有权取消批量刷取的抵用券使用权（含已使用的抵用券和未使用的抵用券）。        </div>        <div class="text-mes">            4、萌店拥有法律范围内的活动解释权。        </div>        <div class="close">            <img src="../../../imgs/venue/icon-close.png"  alt="picture"/>        </div>    </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

"use strict";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-但单击关闭按钮的时候，让弹框隐藏