对话框实现效果如图：
实现的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>京东在线客服</title>
<!--页面的编码集 gbk gb2312 国际化编码 utf-8-->
<meta charset="utf-8">
<style type="text/css">
/*CSS标签样式的写法，直接写标签名*/
body{
background:url("images/1.jpg") no-repeat;
background-size:cover;
}
/* CSS的第二种指定方法，类 class="box" .box*/
.box{
width: 700px;
height: 600px;
background: #fff;
margin: 80px auto;
box-shadow: 0px 0px 5px #000;
border-radius: 10px;
display:none;
}
.header{
height: 60px;
background: #0066ff;
border-radius: 5px;
position:relative;
}
.header .logo{
width: 400px;
height: 88px;
position: absolute;
bottom: 0px;
}
.header .hide{
width: 30px;
height: 30px;
border: 1px solid #fff;
font-size: 16px;
float: right;
text-align: center;
line-height: 30px;
border-radius: 50%;
color: #fff;
box-shadow: 0px 0px 5px #000;
margin: 10px;
cursor: pointer;
}
.header .hide:hover{
width: 35px;
height: 35px;
font-size: 17px;
line-height: 35px;
}
.center{
height: 400px;
background: #fff;
padding: 10px;
overflow: auto;
}
.send{
height:120px;
}
/*指定ID=sendcONTENT的元素样式*/
#sendContent{
width: 690px;
height: 70px;
border: none;
border-top: 1px solid #ddd;
outline: medium;
}
.bottom{
height: 50px;
cursor: pointer;
}
.bottom span{
text-decoration:underline;
font:14px/40px 微软雅黑;
}
button{
float: right;
margin-right: 20px;
width: 100px;
height: 32px;
font-size: 17px;
background: #0066ff;
border-radius: 5px;
border: none;
color: #fff;
cursor: pointer;
box-shadow: 0px 0px 5px #000;
}
button:hover{
box-shadow: 0px 0px 10px 3px #000;
}
.left{
width: 100%;
color: #ff6600;
}
.right{
float: right;
text-align: right;
width:100%;
}
.right img{
border-radius: 50%;
}
</style>
</head>
<body>
<!--
HTML 系统界面的内容 人的构造
CSS 系统界面的风格 人的风格
JAVASCRIPT 系统界面的功能 人的行为
-->
<a href="javascript:void(0);" class="show">打开客服对话窗口</a>
<!--窗体面板 START-->
<DIV class="box">
<!--对话框的头部 START-->
<DIV class="header">
<div class="logo"><img src="images/logo.png"/></div>
<div class="hide">X</div>
</DIV>
<!--对话框的头部 END-->
<!--聊天内容 START-->
<DIV class='center'>
<div class='left'>
<img width="50" height="50" src='images/jimi.png'/>
<span class='msg'>你好，我是Anna，有什么可以为你效劳</span>
</div>
<div class='right'>
<span class='msg'>去给我买杯咖啡！</span>
<img width='50' height='50' src='images/jame.png'/>
</div>
</DIV>
<!--聊天内容 END-->
<!--底部区域 START-->
<DIV class="send">
<input type="text" id="sendContent" placeholder="亲爱滴清描述你的问题……"/>
<div class="bottom">
<span>满意度调查</span>
<span>教我说说话吧</span>
<button>发送</button>
</div>
</DIV>
<!--底部区域 END-->
</DIV>
<!--窗体面板 END-->
<!--引入Jquery的官方类库-->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".show").click(function(){
$(".box").toggle("slow");
$(".show").toggle("slow");
});
$(".hide").click(function(){
$(".box").toggle("slow");
$(".show").toggle("slow");
});
$("button").click(function(){
var content = $("#sendContent").val();
var center = $(".center");
var html = "<div class='right'><span class='msg'>"+content+"</span><img width='50' height='50' src='images/jame.png'/></div>";
center.append(html);
center.scrollTop(center[0].scrollHeight);
$("#sendContent").val("");
$.ajax({
type:"get",
url:"http://www.tuling123.com/openapi/api?key=f93970729cf4406fa6dca904790c9a0d&info="+content,
success:function(result){
var obj = result;
var tmp = "<span>"+obj.text+"</span>";
if(obj.url){
tmp+="<a href='"+obj.url+"' target=_blank>"+obj.text+"</a>";
}
var html="<div class='left'><img width='50' height='50' src='images/jimi.png'/><span class='msg'>"+tmp+"</span></div>";
center.append(html);
center.scrollTop(center[0].scrollHeight);
}
});
});
});
window.onkeydown = function(event){
var key = event.keyCode;
if(key==13){
$("button").click();
}
}
</script>
</body>
</html>
