速建时代TPCMS管理系统

阿里云SMS短信实现客服实时提示插件前端使用方式

**阿里云SMS短信实现客服实时提示插件**

[下载地址](http://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/img/2020-09-03/aliyunSMS--index.zip "下载地址")

**使用方式**
1.下载—-解压—安装到 项目目录下\application/index文件下 按文件目录存放

2.前端页面使用

```html
<script type="text/javascript" src="https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/js/jquery.min.js"></script>

<a href="javascript:;" id="example" rel="nofollow">联系方式</a>
<div id="LoginBox" style="display: none">
    <form class="form-horizontal" role="form" action=""  method="post">
        <div class="row1">
            联系方式<a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">×</a>
        </div>
        <div class="row">
             <input class="form-control" id="phone" placeholder="手机号" name="phone"  type="text" >
        </div>
        <div class="row">

<input type="text" name="text"  id="text" class="form-control" placeholder="描   述">

</div>
        <div class="row" style="line-height: 24px;">
            <span class="lxb-cb-input-tip-content">我们将立即回电。该通话<b>对您免费</b>，请放心接听！手机请直接输入.</span>
        </div>
        <div class="row">
            <a class="btn btn-default add" onclick="doreg1(this)" rel="nofollow">保存信息</a>
        </div>
    </form>
</div>

<style>
    /*弹出框*/
    .mask{margin:0;padding:0;border:none;width:100%;height:100%;background:#333;opacity:0.6;filter:alpha(opacity=60);z-index:999;position:fixed;top:0;left:0;display:none;}
    #LoginBox{position:fixed;left:40%;top:150px;
        margin-left: 0px;
        margin-top: 0px;
        width: 240px;
        border-radius: 3px;
        z-index: 1000;
    }
  #LoginBox .form-horizontal{
    color: #000;
    border-radius: 5px;
    background-color: #ededed;
  }
    #LoginBox .form-horizontal .row1{
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        background-color: #00aef3;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        color: #fff;
        text-indent: 15px;
    }
    #LoginBox .form-horizontal .row1 .close_btn{float: right;color: #fff;margin-right: 15px;}
    #LoginBox .form-horizontal .row{margin: 20px;}
    #LoginBox .form-horizontal .row .add{  background: #00a0e9;color: #fff;margin: 0px auto 20px auto}
</style>
<script>
    $(function ($) {
        //弹出
        $("#example").hover(function () {
            $(this).stop().animate({
                opacity: '1'
            }, 600);
        }, function () {
            $(this).stop().animate({
                opacity: '0.9'
            }, 1000);
        }).on('click', function () {
            $("body").append("<div id='mask'></div>");
            $("#mask").addClass("mask").fadeIn("slow");
            $("#LoginBox").fadeIn("slow");
        });
        //
        //关闭
        $(".close_btn").hover(function () { $(this).css({ color: 'black' }) }, function () { $(this).css({ color: '#999' }) }).on('click', function () {
            $("#LoginBox").fadeOut("fast");
            $("#mask").css({ display: 'none' });
        });
    });
    function doreg1() {
        var phone = $('#phone').val();
        var text = $('#text').val();
        $.ajax({
            type: 'POST',
            dataType: 'json',
            data: {phone:phone,text:text},
            url:"{:url('index/Phone/index')}",
            success: function(res){ //成功
                if (res.code==0){
                    alert(res.msg)
                }
                if (res.code==1){
                    alert(res.msg);
                    $("#mask").css({ display: 'none' });
                    $("#LoginBox").css({ display: 'none' });

}
            }
        });
    }
</script>

```
`注意 在使用阿里云SMS短信服务需要上阿里云开启SMS 收费的，开启后申请SMS KEY值 后在后台设置即可`
[如何申请SMS](http://help.hbsjsd.cn/art/list/83.html "如何申请SMS")