您好,登錄后才能下訂單哦!
微信中打開鏈接時(shí),彈出遮罩提示用戶,請(qǐng)點(diǎn)擊右上角在瀏覽器中打開如何實(shí)現(xiàn)?經(jīng)搜集整理并且驗(yàn)證可用后總結(jié)出可用版本,給有需要的猿友
以下是代碼部分:
第一步:判斷微信的UA。
var ua = navigator.userAgent;
var isWeixin =? !!/MicroMessenger/i.test(ua);
第二步:引入默認(rèn)隱藏層。
<a id="JdownApp">點(diǎn)擊下載APP</a>
<a id="JdownApp2" class="btn-warn">點(diǎn)擊下載APP2</a>
<div class="wxtip" id="JweixinTip">
<span class="wxtip-icon"></span>
<p class="wxtip-txt">點(diǎn)擊右上角<br/>選擇在瀏覽器中打開</p>
</div>
第三步:添加CSS樣式
.wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998; display: none;}
.wxtip-icon{width: 52px; height: 67px; background: url(weixin-tip.png) no-repeat; display: block; position: absolute; right: 20px; top: 20px;}
.wxtip-txt{margin-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}
第四步:點(diǎn)擊按鈕顯示隱藏層,點(diǎn)擊隱藏層關(guān)閉,總的JS代碼如下:
function weixinTip(ele){
var ua = navigator.userAgent;
var isWeixin = !!/MicroMessenger/i.test(ua);
if(isWeixin){
ele.οnclick=function(e){
window.event? window.event.returnValue = false : e.preventDefault();
document.getElementById('JweixinTip').style.display='block';
}
document.getElementById('JweixinTip').οnclick=function(){
this.style.display='none';
}
}
}
var btn1 = document.getElementById('JdownApp');//下載一
weixinTip(btn1);
var btn2 = document.getElementById('JdownApp2'); //下載二
weixinTip(btn2);
以上代碼,你再也不用擔(dān)心有多個(gè)按鈕了。
全部代碼演示:http://www.pushtool.cn/zhezhao/demo3
號(hào)外:這是微信中點(diǎn)擊按鈕才會(huì)提示在瀏覽器中打開遮罩的版本,還有:打開頁面直接顯示提示、安卓和蘋果顯示不同提示等其他版本。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。