jQuery實現彈出遮罩在線QQ客服



56 220 74



特效描述: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.cqetom.live//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.cqetom.live//msgrd?v=3&uin=123456&site=qq&menu=yes">
								售前咨詢-峰</a></li>
								<li>
								<a target="_blank" href="http://www.cqetom.live//msgrd?v=3&uin=123456&site=qq&menu=yes">
								售前咨詢-漢</a></li>
								<li>
								<a target="_blank" href="http://www.cqetom.live//msgrd?v=3&uin=123456&site=qq&menu=yes">
								售前咨詢-玲</a></li>
								<li>
								<a target="_blank" href="http://www.cqetom.live//msgrd?v=3&uin=123456&site=qq&menu=yes">
								售前咨詢-量</a></li>
								<li>
								<a target="_blank" href="http://www.cqetom.live//msgrd?v=3&uin=12345633&site=qq&menu=yes">
								售前咨詢-霞</a></li>
								<li>
								<a target="_blank" href="http://www.cqetom.live//msgrd?v=3&uin=12345634&site=qq&menu=yes">
								售前咨詢-麗</a></li>
								<li>
								<a target="_blank" href="http://www.cqetom.live//msgrd?v=3&uin=12345638&site=qq&menu=yes">
								售前咨詢-喬</a></li>
								<li>
								<a target="_blank" href="http://www.cqetom.live//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.cqetom.live//msgrd?v=3&uin=123456&site=qq&menu=yes">
								售后技術-財</a></li>
								<li>
								<a target="_blank" href="http://www.cqetom.live//msgrd?v=3&uin=123456&site=qq&menu=yes">
								售后技術-海</a></li>
								<li>
								<a target="_blank" href="http://www.cqetom.live//msgrd?v=3&uin=123456&site=qq&menu=yes">
								售后技術-斌</a></li>
								<li>
								<a target="_blank" href="http://www.cqetom.live//msgrd?v=3&uin=1123456&site=qq&menu=yes">
								售后技術-明</a></li>
								<li>
								<a target="_blank" href="http://www.cqetom.live//msgrd?v=3&uin=1123456&site=qq&menu=yes">
								售后技術-軍</a></li>
								<li>
								<a target="_blank" href="http://www.cqetom.live//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.cqetom.live//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.cqetom.live//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

加群請備注:從官網了解到

老夫子电子