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="data: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页在微信中访问增加遮罩层 右上角弹出在浏览器中打开的更多相关文章

  1. js 带遮罩层的弹出层

    最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...

  2. 【Javascript Demo】谷歌地图简单实现(附遮罩层和弹出层实现)

    虽然百度地图实现了,但只是国内的,而且前几天貌似还出问题了,对于国际的只能用谷歌地图了,所以就简单研究了下,做了个差不多的. 基本步骤,谷歌地图API文档其实写的很清楚了,先获取API密钥,然后引用j ...

  3. 【Javascript Demo】遮罩层和弹出层简单实现

    最近纠结于遮罩层和弹出层的实现,终于搞定了个简单的版本.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: <!DOCTYPE html PUBLIC "-//W3C//D ...

  4. Axure Base 09 带遮罩层的弹出框

    示例原型下载:小楼Axure原创元件-带遮罩层的弹出框 实现目标: 1.   点击按钮弹出带遮罩层的对话框: 2.   页面上下左右滚动时,弹出的对话框水平和垂直始终居中. 实现步骤如下: 1. 拖入 ...

  5. js特效遮罩层(弹出层)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  6. html 遮罩层以及弹出框的制作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. element-ui 弹出组件的遮罩层在弹出层dialog模态框的上面

     造成的原因: 因为dialog的组件外层div设置了 position:absolute: 属性所以导致遮罩层会在最上面. 解决方法: 在属性内加上这段代码 :append-to-body=&quo ...

  8. element ui 弹出组件的遮罩层在弹出层的上面的解决方法

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-bo ...

  9. [转]js中confirm实现执行操作前弹出确认框的方法

    原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在 ...

随机推荐

  1. 20165231 2017-2018-2 《Java程序设计》第9周学习总结

    教材学习内容总结 第十三章 URL类 URL类是java.net包中的一个重要的类,URL的实例封装着一个统一资源定位符(Uniform Resource Locator),使用URL创建对象的应用程 ...

  2. Webpack2 中的 NamedModulesPlugin 与 HashedModuleIdsPlugin

    要讨论Webpack 2中新增的这两个plugin的功能,还要先从使用Webpack打包的项目的前端资源缓存方案说起. 通常在使用了Webpack的项目中我们会使用CommonsChunkPlugin ...

  3. unity优化建议

    使用Profiler工具分析内存占用情况 System.ExecutableAndDlls:系统可执行程序和DLL,是只读的内存,用来执行所有的脚本和DLL引用.不同平台和不同硬件得到的值会不一样,可 ...

  4. Spring HibernateTemplate与HibernateDaoSupport对比

    HibernateTemplate与HibernateDaoSupport两者都是spring整合hibernate提供的模板技术. 对于保存一个对象,HibernateTemplate需要先配置 配 ...

  5. FFmpeg configure: rename cuda to ffnvcodec 2018-03-06

    FFmpeg version of headers required to interface with Nvidias codec APIs. Corresponds to Video Codec ...

  6. js垃圾回收(转

    和C#.Java一样JavaScript有自动垃圾回收机制,也就是说执行环境会负责管理代码执行过程中使用的内存,在开发过程中就无需考虑内存分配及无用内存的回收问题了.JavaScript垃圾回收的机制 ...

  7. bean shell之间传递参数

    BeanShell PostProcessor 向 BeanShell断言 传递参数 断言成功:

  8. Java中instanceof与getClass的区别

    在比较一个类和另一个类是否属于同一个类实例的时候,通常可以采用instanceof和getClass两种方法比较两者是否相等来判断,但是两者在判断上面是有差别的,下面通过代码说明: public cl ...

  9. 用layui前端框架弹出form表单以及提交

    第一步:引用两个文件 第二步:点击删除按钮弹出提示框 /*删除开始*/ $(".del").click(function () { var id = $(this).attr(&q ...

  10. python 面向对象编程(高级篇)

    飞机票 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 对象,根据模板创建的实例(即:对 ...