带提交留言的jQuery客服在线

    jQuery客服在线，固定在页面右边，可以关闭，底部是返回顶部按钮。点击微信按钮(即建议按钮)，会弹出留言版，自带灰色遮罩。

1、在head区域引入相关js和css代码：

<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/public_index.css" />
<style type="text/css">
.box_os .os_x, .box_os .osqq, .ico_os, .ico_gt, .ico_pp, .osqq .qq{ background:url(images/kf.gif) no-repeat;}
.box_os{ height:auto; overflow:hidden; width:131px; position:fixed; right:0; top:44px; _position:absolute; z-index:9999;display:none;}
.box_os .os_x{ background-color:#f7f7f7; background-position:2px 2px; width:18px; height:20px; float:right; display:inline; cursor:pointer;}
.box_os .osqq{ width:129px; border:1px solid #D1D1D1; background-color:#fff; background-position:0 -120px; clear:both; padding:37px 0 8px 0; text-align:center;}
.box_os .osqq p{ height:auto; line-height:20px;width:129px; margin-top:8px;}
.box_os .osqq p strong{ color:#666;}
.box_os .osqq img{ padding:7px 0 3px 0;}
.box_os .osqq p em{ color:#999; display:block;}
.box_os .osqq p span{ color:#547816; display:block;}
.box_os .osqq .qq{ background-position:-140px -120px; display:block; width:99px; height:26px; margin:0 auto; margin-top:8px; cursor:pointer;}
.acbox{ width:130px; overflow:hidden;}
.acbox .ico_gt{ background-position:-60px 0; border:1px solid #299ec0; border-top:0; cursor:pointer; width:60px; height:33px; float:right;}
.acbox .ico_pp{ background-position:-60px -60px; border:1px solid #81b140; border-top:0; cursor:pointer; width:60px; height:33px; float:right; margin:0 2px;}
.onlineService{ background:none; display:none; width:39px; *width:84px; height:178px; ;position:fixed; right:0; top:44px; _position:absolute;}
.onlineService .ico_os{ background-position:-2px -20px; border:1px solid #c7c7c7; cursor:pointer; width:39px; height:98px; float:right;}
.onlineService .ico_gt{ background-position:right 0; border:1px solid #299ec0; cursor:pointer; width:39px; height:37px; float:right; clear:both;}
.onlineService .ico_pp{ background-position:right -60px; border:1px solid #81b140; cursor:pointer; width:39px; height:37px; float:right; margin:0 0 1px 0; clear:both;}
.box_os .osqq p span a{color:#557917;}
</style>
<script src="js/feedback_util.js"></script>

2、在body区域引入下面的代码：

<div class="box_os">
    <div class="os_x"></div>
    <div class="osqq">
    <p><em>(工作日：9:30-18:30)</em></p>
        <p><strong>在线QQ</strong></p>
        <p id="ico_onlineqq" class="qq"></p>
        <p><strong>客服电话</strong><span>010-0000000</span><span>010-0000000</span></p>
        <p><strong>会员卡代理</strong><span>010-000000-0000</span></p>
        <p><strong>微博</strong><span><a href="http://www.5imoban.net" target="_blank">免费网站模板</a></span></p>
    </div>
    <div class="acbox">
        <a class="ico_pp" onclick="FeedbackUtil.feed('http://www.5imoban.net');" href="javascript:void(0);" title=""></a>
        <a class="ico_gt" href="#" target="_self" title=""></a>
    </div>
</div>
<div class="onlineService">
    <p class="ico_os"></p>
    <a class="ico_pp" onclick="FeedbackUtil.feed('http://www.5imoban.net/');" href="javascript:void(0);" title=""></a>
    <a class="ico_gt" href="#" target="_self" title=""></a>
</div>
<script type="text/javascript" src="js/onlineService20130718.js"></script>

3、更改“onclick="FeedbackUtil.feed('http://www.5imoban.net/');"”里面的网址为您网站留言处理页面地址。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！