zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    【angularJS】启动(bootstrap)机制
    【angularJS】定义模块angular.module
    【angularJS】简介
    .NET AutoMapper学习记录
    WebAPI学习
    【MongoDB】在C#中使用
    RabbitMQ介绍及windows下安装使用
    【MongoDB】初识
    php命名空间(nameSpace)的使用详解
    魔术方法
  • 原文地址:https://www.cnblogs.com/swack/p/5015003.html
Copyright © 2011-2022 走看看