给微信打开的安卓下载按钮添加遮罩层(苹果商店可以直接跳转因此不需要)

解释:这个和另外一个不同,这个功能是打开网站页面都是可以在微信里打开的,正常浏览,但微信里下载软件大家都知道下载不了.需要跳转到浏览器里下载,但是苹果不需要跳转浏览器里,微信里可以直接跳转到app store,但安卓不行,因此我们只给安卓下载按钮上加个这玩意,只有点击这个安卓下载的按钮才会出现这个弹窗.


在body之间添加以下代码


<!-- 微信遮罩层开始-->
<style type="text/css">
*{margin:0; padding:0;}
img{max-width: 100%; height: auto;}
.test{height: 100%; max-width: 100%; font-size: 40px;}
#weixin-tip{display:none;position:fixed;left:0;top:0;background:rgba(0,0,0,0.8);filter:alpha(opacity=80);width:100%;height:100%;z-index:100;}
#weixin-tip p{text-align:center;margin-top:0%;padding:0 0%;position:relative;}
#weixin-tip .close{color:#fff;padding:5px;font:bold 20px/24px simsun;text-shadow:0 1px 0 #ddd;position:absolute;top:0;left:5%;}
</style>
<script type="text/javascript">
var is_weixin = (function() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
})();
window.onload = function(){
var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
var btn = document.getElementById('J_weixin');
var tip = document.getElementById('weixin-tip');
var close = document.getElementById('close');
if(is_weixin){
btn.onclick = function(e){
tip.style.height = winHeight + 'px';
tip.style.display = 'block';
return false;
}
close.onclick = function(){
tip.style.display = 'none';
}
}
}
</script>
<div id="weixin-tip"><p><img src="遮罩层图片地址" alt="微信打开"/><span id="close" title="关闭" class="close">关闭</span></p></div>
<!-- 微信遮罩层结束-->


在安卓下载的按钮处添加


<a href="安卓下载链接" class="android-btn" id="J_weixin">

微信DIY

微信打开提示浏览器打开代码

2020-3-4 20:33:08

代码源码

Apple个别设备模型图

2020-9-21 19:20:04

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧