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

web頁在微信中訪問增加遮罩層 右上角彈出在瀏覽器中打開

1. <style type="text/css">
2. * {
3. margin: 0;
4. padding: 0;
5. }
7. a {
8. text-decoration: none;
9. }
11. img {
12. max-width: 100%;
13. height: auto;
14. }
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. }
29. .weixin-tip p {
30. text-align: center;
31. margin-top: 10%;
32. padding: 0 5%;
33. }
34. </style>

2. <div class="weixin-tip">
3. <p>
4. <img src="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

web頁在微信中訪問增加遮罩層 右上角彈出在瀏覽器中打開