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

转载于:https://www.cnblogs.com/swack/p/5015003.html