吵吵   2011-03-03  阅读:3,408

用javascript写的一个客服弹窗的代码。很漂亮的哦:

<!–CTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt–>

<title>js客服弹窗代码(www.chaochaoblog.com)吵吵的博客</title>



<style>
< #winpop { width:339px; height:148px; position:absolute;  border:0px solid #999999; margin:0; padding:1px; background:#FFFFFF; filter:alpha(opacity=20); margin:10pxsss;background-image:url(http://www.a99golf.net/includes/templates/a99shop/templates/images /4.jpg); display:none; }

</style>
<script>

function changeH(addH) {
var MsgPop=document.getElementById("winpop");
if(MsgPop.filters.alpha.opacity<100){   MsgPop.filters.alpha.opacity+=addH;  }  else{   clearInterval(tPop);   } } function changeH1(addH){  var MsgPop=document.getElementById("winpop");   if(MsgPop.filters.alpha.opacity>10){
MsgPop.filters.alpha.opacity-=addH;
}
else{
clearInterval(tHid);
MsgPop.style.display="none";
}
}
function scrollItem(){
//alert(document.getElementById("winpop").offsetHeight);
document.getElementById("winpop").style.top=document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("winpop").offsetHeight)/2+"px";
//alert(document.getElementById("winpop").style.top);
document.getElementById("winpop").style.left=document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("winpop").offsetWidth)/2+"px";
}
function hid_pop(){
clearInterval(timerpop);
document.getElementById("winpop").style.display="none";
}
function show_pop(){
document.getElementById("winpop").style.display="block";
scrollItem();
tPop=setInterval("changeH(4)",40);
setTimeout("wait_pop()",9000);
}
function wait_pop(){
if (document.getElementById("winpop").style.display=="block"){
tHid=setInterval("changeH1(4)",40);
}
}
function scall2(){
//scrollitem()
timerpop=setInterval("show_pop()",30000);//设定弹出窗口的时间:www.chaochaoblog.com(吵吵的博客)
}
window.onscroll=scrollItem;
window.onresize=scrollItem;
window.onload=scall2;
</script>
<table border="0" width="100%" align="center">
<tbody>
<tr>
<td width="86%" height="18"> </td>
<td width="14%" valign="middle">
<div id="popClose" style="cursor: pointer;" onclick="hid_pop()">      </div></td>
</tr>
<tr>
<td colspan="2" height="32" valign="middle"> </td>
</tr>
</tbody>
</table>
<table border="0" width="100%" align="center">
<tbody>
<tr>
<td colspan="2" height="53" valign="middle"> </td>
</tr>
<tr>
<td width="55%" height="27"> </td>
<td width="23%" height="27">
<div id="popContact" style="cursor: pointer;" onclick="window.open('http://a99golf.net/livezilla/livezilla.php','','width=590,height=550,left=0,top=0,resizable=yes,menubar=no,location=no,status=yes,scrollbars=yes');hid_pop()">         </div></td>
<td width="22%" valign="middle">
<div id="popWait" style="cursor: pointer;" onclick="wait_pop()">         </div></td>
</tr>
</tbody>
</table>
</code>
以上代码经过我的验证,在ie下通过,至于火狐的层由于和这个不同,就暂时不写了。

吵吵微信朋友圈,请付款实名加入:

吵吵 吵吵

发表评论

电子邮件地址不会被公开。 必填项已用*标注