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

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

弹框在一个很的长页面居中显示相关推荐

oracle存储过程显示弹框,oracle存储过程异常信息的显示
转自http://layznet.javaeye.com/blog/592873 之前写存储过程时,异常处理写法是: ... EXCEPTION WHEN OTHERS THEN ROLLBACK; ...
一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 StatusDialog 和自定义 Toast,全部支持背景颜色,圆角,边框和文字的自定义,构建者模
MNProgressHUD 项目地址:maning0303/MNProgressHUD 简介: 一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 S ...
自定义IOS系统弹框
写在之前系统的弹框虽然很好看,但是有时候无法完全满足UI设计的需求,比如说中间要显示一个输入框,或者要放置一张图片,这里介绍一个很早之前的自定义弹框库,这个自定义弹框sdk写的很细致,定制性很强,几 ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
vue手机端回退_vue移动端弹框组件，vue-layer-mobile
最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...
vue移动端弹框组件
这里说一下 vue-layer-mobile插件的使用一.npm 安装 // 当前最新版本 1.2.0 npm install vue-layer-mobile // 如新版遇到问题可回退旧版本 n ...
电脑关机提示正在关闭远程计算机,电脑关机时间很长一直显示正在关机怎么办...
电脑关机时一直显示正在关机,这种事情貌似大家都遇到过,那么怎么办呢?下面为大家介绍电脑关机时间很长一直显示正在关机的解决方法,来看看吧! 方法/步骤: 1.在"开始"菜单点击&qu ...
如何点击按钮弹出弹框显示几秒_产品反馈设计：如何与用户有效沟通？
正如两人聊天,一人滔滔不绝,另一人沉默寡言,即便有再大的热情,也会被这份冷淡给浇灭,有来有往才会越聊越起劲,越聊越有兴致,才能顺利进行下去.即便是作为一个倾听者,你也需要不时点头示意.双眼交错.嗯啊. ...
高仿微信聊天界面长按弹框样式
效果图背景在公司做的项目里面,刚好有需要用到微信聊天界面长按弹框样式这种UI的. 网上找了一下,没找到. Android现成的 ListPopupWindow又不能满足需求. 因此在非上班时间撸一 ...

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

Nexus 5X

iphone6

Galaxy note3

Ipad

iphone6 plus

HTML

CSS

JS

JS的部分需要简介一下，这里的原理是这样的：

1-通过window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 获取当前页面的可视高度；

2-然后在使用可视高度减去弹框的高度除以二的结果，作为弹框距离顶部的距离。这样不管页面实际高度多长，弹框时钟会在页面的中心。

3-但单击关闭按钮的时候，让弹框隐藏

弹框在一个很的长页面居中显示相关推荐

最新文章

热门文章