Shulou(Shulou.com)06/03 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.