top值：(屏幕或浏览器高度 + 窗体大小) / 2 这个是垂直居中位置
left值：(屏幕或浏览器宽度 + 窗体大小) / 2 这个是水平居中位置
通过jquery的show()和hide()函数联合使用，实现弹出窗口。
一、show（）和hide（）函数解析：
1、show() 方法显示隐藏的被选元素。
注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。
2、hide() 方法隐藏被选元素。
这与 CSS 属性 display:none 类似，但是隐藏的元素不会被完全显示（不再影响页面的布局）。
二、设计一个HTML页面，包括一个简单的弹出窗，和一个显示按钮。其中，调用了jquery的以上两个函数。具体代码如下：
三、设计遮罩层的样式，如下：
四、弹出窗口的css样式，代码如下：
五、初始页面如下：
六、点击按钮，查看弹出窗口结果：
七、关闭弹出窗后，打开开发者中心，如下：
HTML：<p class="shade"></p>
<div class="tanceng">
<p class="cue">亲，活动还在继续，5月6日-5月8日抽奖，要累计50万以上才可参加哦~</p>
<p class="okbtn pt5">
<a href="javascript:void(0)">确 定</a>
</p>
</div>
CSS：
.shade{
width: 100%
background-color: rgba(0,0,0,0.3)
position: fixed
left: 0
top: 0
display: none
}
.tanceng{
background-color: #ffeb8d
width: 240px
padding: 20px
line-height: 200%
color: #f31b33
position: fixed
top: 20%
left: 50%
border-radius: 0.6rem
margin-left: -140px
display: none
}
.okbtn a{
display: block
width: 80%
background-color: #f31b33
color: #fff
line-height: 250%
font-size: 16px
text-align: center
border-radius: 5px
margin:0 auto
}
JS:
var webH = $(window).height()
//这里显示遮罩
$("#inner").click(function(e){ //#inner就是你要点击出现遮罩的按钮
$(".shade,.tanceng").css("display","block")
$(".shade").height(webH)
$(".cue").html("亲，活动还在继续，5月6日-5月8日抽奖，要累计购买50万以上才可参加哦~")
//这个可以不要，这是我自己的东西
})
//这里隐藏遮罩
$(".okbtn").click(function(e){
$(".shade,.tanceng").css("display","none")
$(".shade").height(0)
})
