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="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 -->

提示框代碼

 

實際效果如圖所示：

實例地址：

https://www.swack.net