今天來一個簡化版帶可以關(guān)閉的按鈕操作。使用的是純JS+HTML+CSS結(jié)合的方式,但不要一進(jìn)入微信就彈出提示它在新瀏覽器中打開,在這個頁面里面還可以提交表單查看信息等,只有它點擊應(yīng)用的鏈接后,才彈出提示它跳轉(zhuǎn)后下載。
<a id="J_weixin" class="android-btn" href="#"><img src="img/android-btn.png" alt="安卓版下載" /></a>
<p id="weixin-tip">
<p>
<img src="img/live_weixin.png" alt="微信打開"/>
<span id="close" title="關(guān)閉" class="close">×</span>
</p>
</p>
#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%;}
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';
}
}
}
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="css/app.css?v4"/>
<title>恭喜注冊成功</title>
</head>
<body class="success">
<p class="page-wrap">
<p class="info">
<p class="ok-btn"><img src="img/ok.png" alt="注冊成功"></p>
<p class="entry-con">感謝您加入新聯(lián)</p>
<h2 class="entry-hd">恭喜注冊成功</h2>
<ul class="info-list">
<li>您的健康檔案賬號:15507621887</li>
<li>您的健康檔案密碼:621887</li>
</ul>
</p>
<p class="download">
<h3 class="entry-hd">立即下載新聯(lián)芯健康檔案</h3>
<p class="entry-con">即可免費領(lǐng)取藍(lán)牙智能血糖儀</p>
<p class="download-btn"><a href="#"><img src="img/ios-btn.png" alt="蘋果版下載"></a><a href="#" class="android-btn" id="J_weixin"><img src="img/android-btn.png" alt="安卓版下載"></a></p>
</p>
<p class="app">
<img src="img/app.jpg" alt="應(yīng)用預(yù)覽">
<p class="entry-con">下載完成后,在健康檔案中打開“掃一掃”<br/>再次掃描您看到的新聯(lián)芯二維碼<br/>如有下載困難,請致電:0760-88888888</p>
</p>
<p class="footer-bg">
<p class="entry-con">注:微信用戶請在右上角選擇“在瀏覽器中打開”,再選擇下載應(yīng)用</p>
</p>
</p>
<p id="weixin-tip"><p><img src="img/live_weixin.png" alt="微信打開"/><span id="close" title="關(guān)閉" class="close">×</span></p></p>
<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>
</body>
</html>
版權(quán)聲明: 本站資源均來自互聯(lián)網(wǎng)或會員發(fā)布,如果侵犯了您的權(quán)益請與我們聯(lián)系,我們將在24小時內(nèi)刪除!謝謝!
轉(zhuǎn)載請注明: 微信怎么設(shè)置在瀏覽器中打開APP下載鏈接