HTML5 微信二维码提示框

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

这是一个js的小案例，主要效果是显示一个微信二维码的提示框，非常简单实用。

源码如下：

JS部分

        <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;

                    border:1px solid #000000;

                }

                .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: rgba(255,0,0,0.8);

                    font-size:25px;

                    line-height:100%;

                    padding-top:0px;

                }

            </style>

        </script>

窗体部分：

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

此段代码用于触发显示提示框事件

            <div class="wb-box">

                <div class="wb-box1">

                    <img href="index.html" src="data:images/weixin.jpg" width="258" height="258" />

                </div>

                <div class="wb-box-text1">

                    <a  style="font-size:20px; font-weight:bold; color:#000000;">关注公众号</a>

                </div>

                <div class="wb-box-text2">

                    <a href="javascript:;" onclick="jQuery('.wb-box').hide()" class="close">×</a>

                </div>

            </div><!-- /wb-box -->

提示框代码

实际效果如图所示：