码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2018-08-20 23:50:06      阅读:693      评论:0      收藏:0      [点我收藏+]

标签:alt   uil   code   tom   params   blank   ima   filter   word   

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下载地址

 

 

还有另外一个参考案例:

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

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

标签:alt   uil   code   tom   params   blank   ima   filter   word   

原文地址:https://www.cnblogs.com/kenshinobiy/p/9508839.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!