Wechat prompt browser open code-mask layer prompt code implementation!
When the link is opened in Wechat, a pop-up mask prompts the user, please click on the upper right corner to open it in the browser. After collecting and verifying the availability, the available version is summarized and given to ape friends in need.
The following is the code section:
Step 1: judge the UA of Wechat.
Var ua = navigator.userAgent
Var isWeixin =! / MicroMessenger/i.test (ua)
Step 2: introduce the default hidden layer.
Click to download APP
Click to download APP2
Click on the upper right corner and choose to open it in the browser
Step 3: add a CSS style
.wxtip {background: rgba; 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 the button to show the hidden layer, and click the hidden layer to close it. The total JS code is as follows:
Function weixinTip (ele) {
Var ua = navigator.userAgent
Var isWeixin =! / MicroMessenger/i.test (ua)
If (isWeixin) {
Ele.roomnclick = 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'); / / download one
WeixinTip (btn1)
Var btn2 = document.getElementById ('JdownApp2'); / / download 2
WeixinTip (btn2)
With the above code, you no longer have to worry about having multiple buttons.
Full code demonstration: http://www.pushtool.cn/zhezhao/demo3
Extra: this is the version in Wechat that only clicks a button to open the mask in the browser, and other versions such as opening the page to display prompts directly, Android and Apple to display different prompts, and so on.
