微信扫描打开APP下载链接提示代码
HTML代码：
1 <a id="J_weixin" class="android-btn" href="#"><img src="img/android-btn.png" alt="安卓版下载" /></a> 2 <div id="weixin-tip"><p><img src="img/live_weixin.png" alt="微信打开"/><span id="close" title="关闭" class="close">×</span></p></div>
CSS代码：
1 #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;} 2 #weixin-tip p{text-align:center;margin-top:10%;padding:0 5%;position:relative;} 3 #weixin-tip .close{color:#fff;padding:5px;font:bold 20px/24px simsun;text-shadow:0 1px 0 #ddd;position:absolute;top:0;left:5%;}
JS封装代码：
1 var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1})(); 2 window.onload = function() { 3 var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight; //兼容IOS，不需要的可以去掉 4 var btn = document.getElementById('J_weixin'); 5 var tip = document.getElementById('weixin-tip'); 6 var close = document.getElementById('close'); 7 if (is_weixin) { 8 btn.onclick = function(e) { 9 tip.style.height = winHeight + 'px'; //兼容IOS弹窗整屏 10 tip.style.display = 'block'; 11 return false; 12 } 13 close.onclick = function() { 14 tip.style.display = 'none'; 15 } 16 } 17 }
演示
打开微信扫描看看效果吧。代码演示地址
很多人说这个看不懂，来看看这个更简单的：http://caibaojian.com/weixin-tip3.html
本文转载自博客http://caibaojian.com/weixin-tip2.html#t5
