jQuery实现弹出遮罩在线QQ客服



51 200 67



特效描述:jQuery实现 弹出遮罩 在线QQ客服,jQuery实现弹出遮罩在线QQ客服

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/common.css" type="text/css">
<link rel="stylesheet" href="css/index.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 id="warp">
	<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, 470);
	$("#isread").attr("checked", false);
}
$(document).ready(function(){
	$("#isread").click(popTips);
	$("#isread-text").click(popTips);
	$("#isread22").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://www.51qianduan.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://www.51qianduan.com//msgrd?v=3&uin=123456&site=qq&menu=yes">
								售前咨询-峰</a></li>
								<li>
								<a target="_blank" href="http://www.51qianduan.com//msgrd?v=3&uin=123456&site=qq&menu=yes">
								售前咨询-汉</a></li>
								<li>
								<a target="_blank" href="http://www.51qianduan.com//msgrd?v=3&uin=123456&site=qq&menu=yes">
								售前咨询-玲</a></li>
								<li>
								<a target="_blank" href="http://www.51qianduan.com//msgrd?v=3&uin=123456&site=qq&menu=yes">
								售前咨询-量</a></li>
								<li>
								<a target="_blank" href="http://www.51qianduan.com//msgrd?v=3&uin=12345633&site=qq&menu=yes">
								售前咨询-霞</a></li>
								<li>
								<a target="_blank" href="http://www.51qianduan.com//msgrd?v=3&uin=12345634&site=qq&menu=yes">
								售前咨询-丽</a></li>
								<li>
								<a target="_blank" href="http://www.51qianduan.com//msgrd?v=3&uin=12345638&site=qq&menu=yes">
								售前咨询-乔</a></li>
								<li>
								<a target="_blank" href="http://www.51qianduan.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://www.51qianduan.com//msgrd?v=3&uin=123456&site=qq&menu=yes">
								售后技术-财</a></li>
								<li>
								<a target="_blank" href="http://www.51qianduan.com//msgrd?v=3&uin=123456&site=qq&menu=yes">
								售后技术-海</a></li>
								<li>
								<a target="_blank" href="http://www.51qianduan.com//msgrd?v=3&uin=123456&site=qq&menu=yes">
								售后技术-斌</a></li>
								<li>
								<a target="_blank" href="http://www.51qianduan.com//msgrd?v=3&uin=1123456&site=qq&menu=yes">
								售后技术-明</a></li>
								<li>
								<a target="_blank" href="http://www.51qianduan.com//msgrd?v=3&uin=1123456&site=qq&menu=yes">
								售后技术-军</a></li>
								<li>
								<a target="_blank" href="http://www.51qianduan.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://www.51qianduan.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>
							<p>处理:投诉与建议相关</p>
							<p style="color:#FF0000">我们会全力以赴满足您的服务请求</p>
						</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://www.51qianduan.com//msgrd?v=3&uin=123456&site=qq&menu=yes">
									商务合作</a></div>
							</div>
							<p style="font-size:13px;padding-top:3px;">处理:代理、合作、大客户</p>
						</div>
						<div style="clear:both">
						</div>
						<p style="padding-top:5px;border-top:1px dotted #dedede;margin-top:10px;">
						公司地址:福建省厦门市思明区 <br />
						电话:0592-8888888</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<br><br><br>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 在线客服 qq在线客服 qq客服 在线客服插件 提示框/弹出层

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到