百度商桥毕竟是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”解决了，您可以更好地优化以符合您自己的网站风格。
