HTML实现二维码弹框

2017-09-24 本文已影响59人 Atomwh

前言

在之前写网站的时候，需要在用户点击时弹出二维码图片。网上有很多这样的代码，但发现好多是只能够用于PC端，在移动端网页的效果不理想，后来找到一个在PC端和移动端都适配的比较好的代码，这里记录一下。

注：代码来自网络上的博客，非原创，原文请点击HTML5 微信二维码提示框。本例中对弹出窗体的外观做了点小小的改动，基本框架不变。

前端代码

<script src="js/jquery-1.8.3.min.js"></script>
<style>
        *{padding: 0; margin: 0}
        .wb-box{
            position: fixed;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.8);
            display: none;
        }
        .wb-box1{
            width:258px;
            height:258px;
            position:fixed;
            left:50%;
            top:25%;
            margin-left:-129px;
        }
        .wb-box-text1{
            width:258px;
            position:fixed;
            left:50%;
            top:25%;
            margin-top:258px;
            margin-left:-129px;
            text-align:center;
            color:#000;
        }
        .wb-box-text2{
            width:auto;
            height:auto;
            position:fixed;
            left:50%;
            top:25%;
            margin-left:129px;
            text-align:center;
            background: #555;
            font-size:25px;
            line-height:100%;
            padding-top:0px;
        }
    </style>

供点击的标签：

<a href="javascript:;" onclick="jQuery('.wb-box').show()" class="fa fa-qq"></a>

触发事件：

<div class="qq-box" >
          <div class="qq-box1">
              ![](./img/QQ_QR.jpg)
          </div>
          <div class="qq-box-text1">
              <a  style="font-size:20px; font-weight:bold; color:#000000;">加QQ好友</a>
          </div>
          <div class="qq-box-text2">
              <a href="javascript:;" onclick="jQuery('.qq-box').hide()" class="close" style="width:20px;color:wihte">×</a>
      </div>