Micro letter prompted by the browser to open the code - code for the mask layer Tip!

When micro letter to open the link, the pop-up prompts the user to mask, please click on the upper right corner to open the browser how to achieve? Collecting and verified by the summary of the available version is available, there is a need to ape Friends

The following is the code section:

Step: UA micro message determination.

was UA = navigator.userAgent;
was isWeixin = !! / Micro Messenger / i.test (UA);

The second step: introducing hidden by default layer.

<a href="http://baidu.com/test.apk" id="JdownApp">点击下载APP</a>
<a href="http://baidu.com/test.apk" id="JdownApp2" class="btn-warn">点击下载APP2</a>
<div class="wxtip" id="JweixinTip">
<span class="wxtip-icon"></span>
<p class="wxtip-txt"/>br<Click on the top right>Select Open in the browser </ the p- > 
</ div >

 Step 3: Add CSS Styles

.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;}

Step 4: Click button to display the hidden layer, the hidden layer click closed, the total JS code as follows:

function weixinTip (ELE) {
 var UA = the navigator.userAgent;
 var isWeixin = !! / MicroMessenger / i.test (UA);
 IF (isWeixin) {
ele.onclick = function (e) {
window.event? window.event.returnValue = false : e.preventDefault();
document.getElementById('JweixinTip').style.display='block';
}
document.getElementById('JweixinTip').onclick=function(){
this.style.display='none';
}
}
}
var btn1 = document.getElementById ( 'JdownApp'); // download a 
weixinTip (btn1);
 var btn2 = document.getElementById ( 'JdownApp2'); // download two 
weixinTip (btn2);

The above code, you no longer have to worry about the multiple buttons.

All code demonstrates: http://www.pushtool.cn/zhezhao/demo3

Extraordinary: It is a micro letter will be prompted to click the button in the browser to open the mask version are: to open the page directly to a prompt, Android and Apple display different versions of other tips.

Guess you like

Origin www.cnblogs.com/xiaodingbaby/p/11996728.html