https://blog.csdn.net/zgsdzczh/article/details/79744838

web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开

1.  
   <style type="text/css">
2.  
   * {
3.  
   margin: 0;
4.  
   padding: 0;
5.  
   }
6.  
    
7.  
   a {
8.  
   text-decoration: none;
9.  
   }
10.  
     
11.  
    img {
12.  
    max-width: 100%;
13.  
    height: auto;
14.  
    }
15.  
     
16.  
    .weixin-tip {
17.  
    display: none;
18.  
    position: fixed;
19.  
    left: 0;
20.  
    top: 0;
21.  
    bottom: 0;
22.  
    background: rgba(0, 0, 0, 0.8);
23.  
    filter: alpha(opacity = 80);
24.  
    height: 100%;
25.  
    width: 100%;
26.  
    z-index: 100;
27.  
    }
28.  
     
29.  
    .weixin-tip p {
30.  
    text-align: center;
31.  
    margin-top: 10%;
32.  
    padding: 0 5%;
33.  
    }
34.  
    </style>

1.  
    
2.  
   <div class="weixin-tip">
3.  
   <p>
4.  
   <img src="data:images/tip.png" alt="在浏览器打开" />
5.  
   </p>
6.  
   </div>

1.  
   <script>
2.  
   $(window).on("load", function() {
3.  
   var winHeight = $(window).height();
4.  
   function is_weixin() {
5.  
   var ua = navigator.userAgent.toLowerCase();
6.  
   if (ua.match(/MicroMessenger/i) == "micromessenger") {
7.  
   return true;
8.  
   } else {
9.  
   return false;
10.  
    }
11.  
    }
12.  
    var isWeixin = is_weixin();
13.  
    if (isWeixin) {
14.  
    $(".weixin-tip").css("height", winHeight);
15.  
    $(".weixin-tip").show();
16.  
    }
17.  
    })
18.  
    </script>

DEMO下载地址

还有另外一个参考案例：

file:///C:/Users/Administrator/Desktop/449/449/index.html