HTML/CSS
微信打开网址添加提示浏览器中打开遮罩
PetitQ
由于微信的限制，应用文件在内置浏览器中下载全部被屏蔽掉，造成很多人用微信扫描二维码下载时点击下载按钮没反应，我想到的是做一个提示用户在浏览器中打开下载。网上流传的各种微信打开下载链接，微信已更新基本失效。今天要加的是一个终极解决方法：弹出一个遮罩提示用户在新的浏览器窗口打开。再也不用管微信如何的更新，直接判断微信的 ua，然后弹出一个遮罩提示用户在浏览器中打开下载。并且不加关闭的按钮。类似于下面这样子：
这样子用户就只能在浏览器中打开，并且可以直接下载应用了，欢迎打开微信扫描查看（其他扫描没有效果）。
实现原理
其实原来很简单，就是判断当前是在微信内置浏览器中，然后将默认隐藏的提示层显示出来。
也想出现在这里？联系我们吧
第一步：
引入默认隐藏层
<a id="J_weixin" class="android-btn" href="#"><img src="img/android-btn.png" alt="安卓版下载" /></a>
<div id="weixin-tip"><p><img src="img/live_weixin.png" alt="微信打开"/><span id="close" title="关闭" class="close">×</span></p></div>
第二步：
添加 CSS 样式
#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:10%;padding:0 5%;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%;}
第四步：
点击按钮显示隐藏层，点击隐藏层关闭，总的 JS 代码如下：
var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1})();
window.onload = function() {
var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight; //兼容IOS，不需要的可以去掉
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'; //兼容IOS弹窗整屏
tip.style.display = 'block';
return false;
}close.onclick = function() {
tip.style.display = 'none';
}}}
以上代码，你再也不用担心有多个按钮了。我已经将代码上传到 github 上了，你可以直接下载我的图片和 js 来用。如果这个代码对你有用，希望你在下载时也点击 star 一下。
- 纯 Javascript 版本
- jQuery+HTML 版本
- jquery+HTML 版本
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
