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

旧城等待， 2022-01-05 13:31 270阅读 0赞

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="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下载地址][DEMO]

**还有另外一个参考案例：**

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

转载于:https://www.cnblogs.com/kenshinobiy/p/9508839.html

[DEMO]: https://download.csdn.net/download/zgsdzczh/10315929

发表评论取消回复

表情：

评论列表（有 0 条评论，270人围观）

还没有评论，来说两句吧...

相关阅读

相关 Custombox—jQuery和CSS3遮罩层弹出层

[下载地址][Link 1] Custombox是jQuery和CSS3转换模态窗口的影响。有许多影响如渐明,幻灯片,报纸,秋天,Sidefall,模糊,翻转,标志,S

向右看齐/ 2022年09月14日 13:27/ 0 赞/ 327 阅读

相关 js遮罩层弹出框

昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了一定指出呀 <s

待我称王封你为后i/ 2022年08月06日 11:03/ 0 赞/ 328 阅读

相关阻止微信浏览器/QQ浏览器弹框“在浏览器打开”

阻止微信浏览器/QQ浏览器弹框“在浏览器打开” 相信许多移动端工程师对下面这张图中出现的东西记忆深刻： ![这里写图片描述][SouthEast] 微信浏览器和Q

客官°小女子只卖身不卖艺/ 2022年06月17日 07:40/ 0 赞/ 711 阅读

相关微信打开网址添加在浏览器中打开提示遮罩

使用微信打开网址时，无法在微信内打开常用下载软件，手机APP等。解决方案：弹出一个遮罩提示用户在新的浏览器窗口打开。使用的是纯JS+HTML+CSS结合的方式，

我就是我/ 2022年06月13日 02:06/ 0 赞/ 517 阅读

相关 [jquery]弹框，遮罩层

之前使用semantic的modal作为遮罩层。出现了一些关乎源代码的bug。所以自己必须要写一个自己的弹框以达到目的： ![这里写图片描述][SouthEast]

拼搏现实的明天。/ 2022年06月03日 04:18/ 0 赞/ 374 阅读

相关微信小程序中遮罩层的实现

近期在写一点小东西，碰到遮罩层，今天把它总结下来，方便大家共同学习：有好几种方法，今天先来第一种。准备工作：一张图片：close.png ![20180

谁践踏了优雅/ 2022年05月29日 00:29/ 0 赞/ 699 阅读

相关 JavaScript点击弹出遮罩层

JavaScript点击弹出遮罩层开发工具与关键技术：DW与JS 作者：戴怡斌撰写时间：2019年1月18日下面我

小咪咪/ 2022年03月25日 05:51/ 0 赞/ 511 阅读

相关弹出框的遮罩层

css样式： .shade { // 遮罩层的实现方法 position: fixed; top: 0;

末蓝、/ 2022年02月24日 12:16/ 0 赞/ 437 阅读

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

https://blog.csdn.net/zgsdzczh/article/details/79744838 web页在微信中访问增加遮罩层右上角弹出在浏览器中打开 1

旧城等待，/ 2022年01月05日 13:31/ 0 赞/ 271 阅读

相关微信内部浏览器打开网页时提示外部浏览器打开遮罩升级版

上半年公司有一个新的APP项目上线，我们在项目首页做个二维码，然后用户用手机扫一扫就能下载了。但是很多用户反映扫一扫之后下载不了，了解之后才知道这些用户都是使用的微信的扫一扫，

客官°小女子只卖身不卖艺/ 2021年12月23日 07:07/ 0 赞/ 701 阅读