点击自动弹出信息的在线客服代码

特效描述：jQuery点击按钮 遮罩弹出 在线QQ客服，jQuery弹出遮罩的在线QQ客服代码

代码部署教程

1. 引入CSS

<link rel=”stylesheet” href=”css/style.css” type=”text/css”>

2. 引入JS

<script type=”text/javascript” src=”js/jquery.js”></script>

<script type=”text/javascript” src=”js/tipswindown.js”></script>

3. HTML代码

<div style=”height:1200px;”></div>
<script type=”text/javascript”>
/*
*弹出本页指定ID的内容于窗口
*id 指定的元素的id
*title: window弹出窗的标题
*width: 窗口的宽,height:窗口的高
*/
function showTipsWindown(title,id,width,height){
tipsWindown(title,”id:”+id,width,height,”true”,””,”true”,id);
}
function confirmTerm(s) {
parent.closeWindown();
if(s == 1) {
parent.document.getElementById(“isread”).checked = true;
}
}
//弹出层调用
function popTips(){
showTipsWindown(“客服中心”, ‘simTestContent’, 620, 450);
$(“#isread”).attr(“checked”, false);
}
$(document).ready(function(){
$(“#isread”).click(popTips);
$(“#isread-text”).click(popTips);
});
</script>
<div class=”kf_qq_r”><a id=”isread-text” href=”#”></a></div>
<div style=”display:none;”>
<div id=”simTestContent” class=”simScrollCont”>
<div class=”mainlist”>
<div class=”kf_qq_li”>
<div class=”kf_qq_li_left kf_qq_li_1″>
</div>
<div class=”kf_qq_li_right”>
<div class=”kf_r_t”>
<span>企业QQ：</span><a class=”qyqq” target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes”>在线咨询</a><span style=”padding-left:19px;”>400电话：4000-0000-00</span></div>
<div class=”kf_r_d”>
企业QQ与400电话采用集中调度，多人值班，受理所有业务</div>
</div>
</div>
<div class=”kf_qq_li”>
<div class=”kf_qq_li_left kf_qq_li_2″>
</div>
<div class=”kf_qq_li_right”>
<div class=”kf_qq_c”>
<ul>
<li>
<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes”>
售前咨询-峰</a></li>
<li>
<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes”>
售前咨询-汉</a></li>
<li>
<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes”>
售前咨询-玲</a></li>
<li>
<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes”>
售前咨询-量</a></li>
<li>
<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=12345633&site=qq&menu=yes”>
售前咨询-霞</a></li>
<li>
<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=12345634&site=qq&menu=yes”>
售前咨询-丽</a></li>
<li>
<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=12345638&site=qq&menu=yes”>
售前咨询-乔</a></li>
<li>
<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=12345632&site=qq&menu=yes”>
售前咨询-娟</a></li>
</ul>
</div>
<div class=”kf_r_d”>
业务相关，请咨询售前客服。为避免丢失消息，请尽量添加好友</div>
</div>
</div>
<div class=”kf_qq_li”>
<div class=”kf_qq_li_left kf_qq_li_3″>
</div>
<div class=”kf_qq_li_right”>
<div class=”kf_qq_c”>
<ul>
<li>
<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes”>
售后技术-财</a></li>
<li>
<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes”>
售后技术-海</a></li>
<li>
<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes”>
售后技术-斌</a></li>
<li>
<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=1123456&site=qq&menu=yes”>
售后技术-明</a></li>
<li>
<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=1123456&site=qq&menu=yes”>
售后技术-军</a></li>
<li>
<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes”>
售后技术-森</a></li>
</ul>
</div>
<div class=”kf_r_d”>
售后问题处理，请咨询售后技术。为避免丢失消息，请尽量添加好友</div>
</div>
</div>
<div class=”kf_qq_li” style=”background:none;”>
<div class=”kf_qq_li_left kf_qq_li_4″>
</div>
<div class=”kf_qq_li_right”>
<div class=”ke_qq_jl ke_qq_jl_l”>
<div class=”jl_left”>
许经理：</div>
<div class=”jl_right”>
<div class=”jl_call”>
138-0000-0000</div>
<div class=”jl_qq”>
<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=12345635&site=qq&menu=yes”>
投诉建议</a></div>
</div>
<div class=”jl_left” style=”padding-top:5px;”>
张经理：</div>
<div class=”jl_right” style=”padding-top:5px;”>
<div class=”jl_call”>
138-0000-0000</div>
</div>
</div>
<div class=”ke_qq_jl”>
<div class=”jl_left”>
张经理：</div>
<div class=”jl_right”>
<div class=”jl_call”>
138-0000-0000</div>
<div class=”jl_qq”>
<a target=”_blank” href=”http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes”>
商务合作</a></div>
</div>
</div>
<div style=”clear:both”>
</div>
</div>
</div>
</div>
</div>
</div>

下载地址

立即下载