寫個遮罩，沒想到寫了一天。把前面的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");
    }