微信提示浏览器打开代码——遮罩层提示代码实现!

微信中打开链接时,弹出遮罩提示用户,请点击右上角在浏览器中打开如何实现?,本期手把手教会。

现在免费分享出来,最终实现效果如下:

以下是代码部分:

第一步:判断微信的UA。

var ua = navigator.userAgent;
var isWeixin =  !!/MicroMessenger/i.test(ua);

第二步:引入默认隐藏层。

<a href="http://caibaojian.com/test.apk" id="JdownApp">点击下载APP</a>
<a href="http://caibaojian.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/>选择在浏览器中打开</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;}

第四步:点击按钮显示隐藏层,点击隐藏层关闭,总的JS代码如下:

function weixinTip(ele){
var ua = 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‘);//下载一
weixinTip(btn1);
var btn2 = document.getElementById(‘JdownApp2‘); //下载二
weixinTip(btn2);

以上代码,你再也不用担心有多个按钮了。

全部代码演示:http://www.pushtool.cn/zhezhao/demo3

原文地址:https://www.cnblogs.com/lz4t9tn5/p/12082806.html

时间: 2024-10-10 09:34:05

微信提示浏览器打开代码——遮罩层提示代码实现!的相关文章

微信中域名被封-页面添加遮罩层提示用户使用浏览器打开(或下载APP)

微信营销是网络经济时代企业或个人营销模式的一种.是伴随着微信的火热而兴起的一种网络营销方式.但是也正因为如此,微信官方的屏蔽封杀域名的规范的也越来越严格.商家与微信之间进行着微信防封防屏蔽和封杀较量,可以说微信在广告拦截,封杀方面几乎是苛刻的.任何有广告嫌疑或被举报基本都百分百进入封杀名单.从2019下半年的“拼多多”链接不再被开放绿色通道便能看出腾讯的果决. 但是即使在如此,在微信防封上面仍然还是有巨大突破的.今天我给大家分享几种微信防封的行之有效方案,以下方案基本涵盖了市面上所有的微信推广方

微信内置浏览器打开app下载网页提示已停止访问怎么办?哪些api接口可以恢复访问

微信内置浏览器打开app下载网页提示已停止访问怎么办?哪些api接口可以恢复网页正常访问? 现如今微信对第三方app下载链接的拦截是越来越严格了,下载链接在微信中分享转发经常会被拦截,一旦被拦截用户就只能复制链接手动打开浏览器粘贴才能访问,如此给用户带来的体验台差,用户量无法有效地累积起来,从而导致推广成本一直在增加,推广效率却无法有明显的提升. 所以针对这个问题,特写这篇文章分享哪些api接口可以免费实现微信内自动跳转浏览器下载app的功能. Mindjump-API接口平台 366API-接

微信内部浏览器打开网页时提示外部浏览器打开升级版探讨-直接跳转默认浏览器打开

在涉及移动端支付的项目时,由于对支付需求的精细化,不仅需要扫码支付,还有唤醒App支付,另外还有在微信.QQ.支付宝内置浏览器给出相应的提示. 好在国内各大巨头公司在开发浏览器的时候都在浏览器标识上加了相应的字符,下面直接贴代码: function is_neizhi() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { return

微信在浏览器打开前的提示页面Android与IOS判断

直接在网上扒一个页面,分分钟搞定!  先看一下效果 这是用微信开发工具打开的样式,直接上完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <

微信在浏览器打开拦截了 微信屏蔽网址打开如何解决

但凡使用微信分享转发链接的朋友,应该都会遇到链接在微信内无法打开的问题,甚至可以说是家常便饭.一般都有以下几种情况: 情况1:分享转发H5网页,但会因为他人举报或微信系统检测到含敏感词和诱导分享内容而被屏蔽. 情况2:分享转发文件的下载页地址,但会被微信主动拦截屏蔽,因为微信禁止第三方应用在微信内的转发分享,尤其是棋牌.BC.灰度社交类APP. 以上两种情况轻则屏蔽分享链接,重则直接封主域名并记录服务器ip.但无论是哪一种情况都会造成两个结果,其一推广效率上不去,其二推广成本日渐增加. 综上所述

Jquery超简单遮罩层实现代码

看了很多代码,下面跟大家分享一下我认为最简单的遮罩层实现方式: 1.样式如下设置: CSS代码: [html] view plain copy print? <style type="text/css"> .mask { position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; z-index: 1002; left: 0px; opacity:0.5; -moz-opa

微信网页浏览器打开链接后跳转到其他浏览器下载APK文件包

做微信营销活动或者APK下载推广时候,是无法直接下载,做到微信中正常使用呢?这就要借助一些工具来实现有效的操作. 安卓手机的话是通过点击链接,直接跳转出微信.自动打开手机默认的浏览器.但是这个方法IOS的系统暂时还不行.所以只能写判断了. 演示地址:http://demo.liuy88.cn/wxjum_xf0107017 原文地址:https://www.cnblogs.com/tomjhga/p/10233960.html

最新版微信/QQ的遮罩引导代码实现 点击链接或扫码提示浏览器打开

相信在微信中做推广的朋友一定都遇到这种情况的.当你需要在微信中推广的时候会发现,自己的网页被微信屏蔽了,还有就是说APP的下载链接在微信中点击是无法下载的.必须要手动点击,右上角的三个点,然后选择在浏览器中打开,才可以顺利完成! 虽然说这个对于我们比较了解微信的朋友来说是很简单,很轻松的!但是使用微信的百分之九十都是小白,他们是不知道有这部操作的. 今天要加的是一个终极解决方法:弹出一个遮罩提示用户在新的浏览器窗口打开.· ? 再也不用管微信如何的更新,直接判断微信的ua,然后弹出一个遮罩提示用

判断是不是微信浏览器,如果是将弹出遮罩层提示在右上角浏览器中打开(一般用于下载东西)

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid