给微信内置浏览器里的安卓下载按钮添加遮罩层,苹果下载按钮不需要

预览图:

给微信内置浏览器里的安卓下载按钮添加遮罩层,苹果下载按钮不需要-星境(VKRT.CN)

解释:这个和另外一个不同,这个功能是打开网站页面都是可以在微信里打开的,正常浏览,但微信里下载软件大家都知道下载不了.需要跳转到浏览器里下载,但是苹果不需要跳转浏览器里,微信里可以直接跳转到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="https://ww2.sinaimg.cn/large/005BYqpggy1g1vh18ur65j30m80xc442.jpg" alt="微信打开"/><span id="close" title="关闭" class="close">关闭</span></p></div>
<!-- 微信遮罩层结束-->

 
在安卓下载的按钮处添加

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

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

2019-7-24 10:47:45

微信DIY

微信打开跳转到另外一个网站提示浏览器打开功能,适合网站被腾讯屏蔽的那种

2019-7-24 10:50:09

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
搜索