遮罩

写个遮罩，没想到写了一天。把前面的bug改了。真是前面有坑不填，后面坑等着你。
先说html

        
        

          
        
关注XXXX
长按识别二维码

本来想自己用::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");
    }