写个遮罩，没想到写了一天。把前面的bug改了。真是前面有坑不填，后面坑等着你。
先说html
<div id="modal">
<!-- <div class="close1">╳</div> -->
<div class="close1"><i class="fa fa-close fa-2x"></i></div>
<img src="<%g.thumb%>" />
<div class="model-text"><span>关注XXXX<br>长按识别二维码</span></div>
</div>
本来想自己用::after::before伪类写的，但是发现自己没这个本事。去先学又浪费时间，只是草草看了一下。先是用x代替，发现太丑，然后就用特殊符号写，做完还是丑，于是乎只能用icon了。哎。
#modal{position: absolute; text-align: center;top: 0;left: 0;width: 100%;height:100%;background-color:rgba(9,9,9,0.8) ; z-index: 9;display: none;}
#modal img{width: 60%; margin: 0 auto;margin-top: 40% ;}
.model-text{font-size: 1rem;letter-spacing:10px;margin-top: 0.5rem; color: #fff}
.close1{width: 2.5rem;height: 2.5rem; line-height: 1.5rem;position: absolute;display: inline-block; overflow: hidden;right:0;margin:10px;border-radius: 50%;color: #fff;bottom: 0;top: 0; }
js的话对获取屏幕样式又不熟，只能自己一个个试。因为html有bug，发现body居然不包含着整个页面，真是奇了怪了
于是乎就F12一个个模块找，看是不是清浮动的问题，overflow的问题。找到后来发现，给body加个height：auto就好了。
我草，当时都心疼自己，找了那大半天。
Javascript:
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
JQuery：
$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
})
因为不太清楚获取高，所以第一次遮罩是有bug 的，位置居然不对，然后百度了一波。百度是个好东西啊。
var modal = document.getElementById('modal');
var btn = document.querySelector('.guanzhu');
btn.onclick = function(){
var nowHeight = $(window).height();//获取到可视区的高度
var bodyHeight = $(document).height();//获取到整个文档的高度
var winScoll ;//滚动高度初始化
modal.style.top = bodyHeight - nowHeight + 'px';//因为点击获取二维码在下面，所以的，文档高度-可视区的高度=top距离
modal.style.display = 'block';
//这个就是手机端阻止页面滑动，顺便兼下ie可能没什么用
$("body").on("touchmove",function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
})
//本来想着用户滚动遮罩也随着滚动，但是有ui说，哪有人遮罩出来了还能滚的，这个就废了，白写了，但是我没删。
$(window).scroll(function(event){
winScoll = $(window).scrollTop();
modal.style.top =winScoll + 'px';
});
}
var close = document.querySelector('.close1');
close.onclick = function(){
modal.style.display = 'none';
//这边就是释放阻止滑动了
$("body").off("touchmove");
}
