百度商桥毕竟是BAT公司开发的一款网页聊天软件，关键还免费，所以用户量还是非常多的。

然而，不少客户测试了百度商桥“沟通窗口”中的“新页面”和“小浮窗”功能均不能实现。

这么大的BUG吗？

那咱们做无锡网站开发的不能袖手旁观，得在有限的条件内创造出更多可能！

【目标】实现点击“立即咨询”触发弹窗（而不是打开新窗口聊天），在当前页面直接聊天

不多说，直接上代码，如下：

1、引入CSS样式文件

<style type="text/css">

   #tip { position: absolute; right: 0px;

    bottom: 0px;  height: 0px;

    width: 502px;  border: 1px solid #CCCCCC;

    background-color: #eeeeee;  padding: 1px;

    overflow: hidden; display: none;

    font-size: 12px; z-index: 10;

   }

   #tip p { padding: 1px;}

   #tip h1 { font-size: 16px; height: 25px;

    line-height: 25px; background-color: #0076fc;

    color: #FFFFFF; padding: 0px 3px 0px 3px;

    filter: Alpha(Opacity = 100);

   }

   #tip h1 a, #detail h1 a { float: right;

    text-decoration: none; color: #FFFFFF;

   }

</style>

2、引入JavaScript代码

<script type="text/javascript">

   window.onload = function(){

    var divTip = document.createElement("div");

    divTip.id = "tip";

    divTip.innerHTML = "<h1><a href='javascript:void(0)' onclick='start()'>关闭</a>在线客服</h1><p><iframe src='此处填写你的百度商桥独立沟通链接' scrolling='no' width='100%' height='580'></iframe></p>";

    divTip.style.height = '0px';

    divTip.style.bottom = '0px';

    divTip.style.position = 'fixed';

    document.body.appendChild(divTip);

   }

   var handle;

   function start(count){

    var obj = document.getElementById("tip");

    if (parseInt(obj.style.height) == 0) {

     obj.style.display = "block";

     handle = setInterval("changeH('up')", 20);

    }

    else {

     handle = setInterval("changeH('down')", 20)

    }

   }

   function changeH(str){

    var obj = document.all ? document.all["tip"] : document.getElementById("tip"); 

    if (str == "up") {

     if (parseInt(obj.style.height) > 400) 

      clearInterval(handle);

     else

      obj.style.height = (parseInt(obj.style.height) + 8).toString() + "px";

    }

    if (str == "down") {

     if (parseInt(obj.style.height) < 8) {

      clearInterval(handle);

      obj.style.display = "none";

     }

     else

      obj.style.height = (parseInt(obj.style.height) - 8).toString() + "px";

    }

   }

   function showwin(){

    start();

   }

</script>

3、如何使用呢？

例如：在您网页中需要使用到客服的地方调用  <a href="#" onclick="start()">立即咨询</a>

注意：a标签的href是需要写成“#”伪链接

【总结】

无锡做网站公司-马氪软件本次无私分享的就是实现了百度商桥在当前页面中调用，不需要再次弹窗到新页面中进行聊天，用户体验更高。

从右下角缓慢上移，打开聊天窗口（并且是带关闭按钮的哦），直接把百度商桥的“BUG”解决了，您可以更好地优化以符合您自己的网站风格。

本文链接：http://mkapps.cn/news/ask/303.html