微信

web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开

云博小周宇1 Min Read

https://blog.csdn.net/zgsdzczh/article/details/79744838

web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开

  1.  
    <style type=“text/css”>

  2.  
    * {

  3.  
    margin: 0;

  4.  
    padding: 0;

  5.  
    }

  6.  
     
  7.  
    a {

  8.  
    text-decoration: none;

  9.  
    }

  10.  
     
  11.  
    img {

  12.  
    max-width: 100%;

  13.  
    height: auto;

  14.  
    }

  15.  
     
  16.  
    .weixin-tip {

  17.  
    display: none;

  18.  
    position: fixed;

  19.  
    left: 0;

  20.  
    top: 0;

  21.  
    bottom: 0;

  22.  
    background: rgba(0, 0, 0, 0.8);

  23.  
    filter: alpha(opacity = 80);

  24.  
    height: 100%;

  25.  
    width: 100%;

  26.  
    z-index: 100;

  27.  
    }

  28.  
     
  29.  
    .weixin-tip p {

  30.  
    text-align: center;

  31.  
    margin-top: 10%;

  32.  
    padding: 0 5%;

  33.  
    }

  34.  
    </style>

  1.  
     
  2.  
    <div class=“weixin-tip”>

  3.  
    <p>

  4.  
    <img src=“images/tip.png” alt=“在浏览器打开” />

  5.  
    </p>

  6.  
    </div>

  1.  
    <script>

  2.  
    $(
    window).on(“load”, function() {

  3.  
    var winHeight = $(window).height();

  4.  
    function is_weixin() {

  5.  
    var ua = navigator.userAgent.toLowerCase();

  6.  
    if (ua.match(/MicroMessenger/i) == “micromessenger”) {

  7.  
    return true;

  8.  
    }
    else {

  9.  
    return false;

  10.  
    }

  11.  
    }

  12.  
    var isWeixin = is_weixin();

  13.  
    if (isWeixin) {

  14.  
    $(
    “.weixin-tip”).css(“height”, winHeight);

  15.  
    $(
    “.weixin-tip”).show();

  16.  
    }

  17.  
    })

  18.  
    </script>

DEMO下载地址

 

web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开

 

还有另外一个参考案例：

file:///C:/Users/Administrator/Desktop/449/449/index.html