速建时代TPCMS管理系统

联系我们

```javascript

<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>
```

```css

<style>
#example{position: fixed;right: 0px; color: #fff; background: #00a0e9; padding: 20px 40px; font-size: 28px; font-weight: bold;border-radius: 8px;text-shadow:#f00 2px 2px 2px;}
#example i{font-size: 25px; padding-right: 10px;}
/*弹出框*/
    .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; text-align: center}
    #LoginBox .form-horizontal .row .add{  background: #00a0e9;color: #fff;margin: 0px auto 20px auto}
</style>
```

```html

<a href="javascript:;" id="example" rel="nofollow"><i class="iconfont icon-shouji2"></i>在线咨询</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">

< textarea name="text"  id="text" class="form-control" placeholder="描   述">< /textarea >

</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>
```