码迷,mamicode.com
首页 > 微信 > 详细

HTML5 微信二维码提示框

时间:2015-12-03 09:40:35      阅读:604      评论:0      收藏:0      [点我收藏+]

标签:

这是一个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 -->

提示框代码

 

实际效果如图所示:

技术分享

实例地址:

www.swack.cn

HTML5 微信二维码提示框

标签:

原文地址:http://www.cnblogs.com/swack/p/5015003.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!