在工作中，我们常常会遇到这样的需求：点击某个按钮或者分享完之后会弹出一个内容框，水平居中对齐在屏幕上。我们下面的代码就是针对移动端来完成这个需求，我们先来看一下效果图片：
点击分享之前
点击分享之前.jpeg
点击分享之后
点击分享之后.jpeg
html结构分析
html结构分析.jpg
下面是我简化之后的代码，帖出来给大家看一下：
html
<div class="content">这里面是你的内容 巴拉巴拉...</div>
<!-- 用来点击的按钮 -->
<div class="share-btn">
<a href="javascript:void (0);" id="share">我要分享</a>
</div>
<!-- 分享之后显示的内容 -->
<div class="popup-wrapper">
<div class="popup-content">
<h4 class="popup-title">
分享成功
<a href="javascript:void (0);" class="close">
</a>
</h4>
<ul class="content-list">
<li>
<a href="#">
<p class="w100">蒙古决定要回归：中国高兴睡不着，美俄听后很震惊蒙古决定要回归：中国高兴睡不着，美俄听后很震惊</p>
</a>
</li>
<li>
<a href="#">
<p class="w72">蒙古决定要回归：中国高兴睡不着，美俄听后很震惊</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 遮罩层 -->
<div class="bg"></div>
下面是css代码，我这里只贴出最关键的代码，其他的内容就省略了。
/* popup START */
.bg { // 遮罩层
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: url("./img/popup-bg.jpg") no-repeat top left;
background-size: cover;
z-index: 1001;
display: none;
}
/* 分享浮动层 */
.popup-wrapper { // 跟移动端屏幕一样大的覆盖层，后面会说明为什么要这一层。
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: rgba(0, 0, 0, 0);
z-index: 10004;
display: none;
}
.popup-content { // 中间内容
position: absolute;
top: 50%;
left: 50%;
margin-top: -5.1466666666666665rem;
margin-left: -4.466666666666667rem;
display: none;
width: 8.933333333333334rem;
height: 10.293333333333333rem;
background: #fff;
z-index: 10005;
border-radius: 0.13333333333333333rem;
}
.close { // 关闭按钮
position: absolute;
right: 0.4rem;
top: 0;
display: block;
width: 0.32rem;
height: 0.32rem;
cursor: pointer;
}
.close img {
width: 0.32rem;
height: 0.32rem;
}
.share-btn { // 分享按钮
position: fixed;
right: 0.3rem;
bottom: 1.6rem;
font-size: 14px;
}
/* popup END */
js代码，下面是最关键的内容了。
为了让大家更直观的看清楚代码的作用，我直接在注释中描述了每行代码的原因，相信大家一看就明白了。
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$("#share").on("click", function () {
$(".popup-wrapper").on('touchmove', function (event) {
event.preventDefault();
});
// 上面这段代码的作用是当内容层弹出来了之后，
// 通过.preventDefault()阻止默认行为，
// 不允许用户滑动屏幕，这个覆盖层做成跟屏幕100%的大小，
// 就是为了让用户不管滑动任何地方，页面都不会动。
// 不过这样做有一个比较大的缺点，如果内容中有需要滚动的话，是无法滚动的。
$(".popup-wrapper").show(); // 覆盖层显示出来
$(".popup-content").show(); // �内容显示出来
$(".bg").show(); // �遮罩层显示出来
$(window).scrollTop(0); // 将滚动条滚动到顶部，
// 主要是怕有的时候我们的分享按钮在页面的第二屏或者更下面。
// 还没有点分享按钮之前，查看内容的时候，跑到下面去了，
// 当弹出的内容层时，还需要滚动滚动条才能看到，这样的体验就不太好。
$("body, html").css({"overflow": "hidden"});
// 这一句的作用也是为了阻止滚动条滚动，不过移动端有的时候不起作用，
// 为了以防万一，才加了覆盖层和最上面touchmove的代码。
});
$(".close, .bg, .popup-wrapper").on("click", function () {
$(".bg").hide();
$(".popup-content").hide();
$(".popup-wrapper").hide();
$(window).scrollTop(0);
$("body,html").css({"overflow": "auto"});
});
});
</script>
