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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_24147051/article/details/53020025

说到这个问题,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、活动时间:201611710点至2016111410点。其中,2016111022点至2016111410点为活动正式开抢时间,其余时间用户可抢先收藏活动商品,提前了解“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-但单击关闭按钮的时候,让弹框隐藏

展开阅读全文

没有更多推荐了,返回首页