ajax实现对话框,jQuery实现聊天对话框

本文实例为大家分享了jQuery实现聊天对话框的具体代码，供大家参考，具体内容如下

效果图：左下角选择对话的角色，在对话框输入消息点击发送按钮，消息显示在上面界面当中，然后对话框内容被清空。

Document

.talk_con {

width: 600px;

height: 500px;

border: 1px solid #666;

margin: 50px auto 0;

background: #f9f9f9;

}

.talk_show {

width: 580px;

height: 420px;

border: 1px solid #666;

background: #fff;

margin: 10px auto 0;

overflow: auto;

}

.talk_input {

width: 580px;

margin: 10px auto 0;

}

.whotalk {

width: 80px;

height: 30px;

float: left;

outline: none;

}

.talk_word {

width: 420px;

height: 26px;

padding: 0px;

float: left;

margin-left: 10px;

outline: none;

text-indent: 10px;

}

.talk_sub {

width: 56px;

height: 30px;

float: left;

margin-left: 10px;

}

.atalk {

margin: 10px;

}

.atalk span {

display: inline-block;

background: #0181cc;

border-radius: 10px;

color: #fff;

padding: 5px 10px;

}

.btalk {

margin: 10px;

text-align: right;

}

.btalk span {

display: inline-block;

background: #ef8201;

border-radius: 10px;

color: #fff;

padding: 5px 10px;

}

$(function(){

$('#talksub').click(function(){

//发送单击，获取用户输入的数据value属性值

var vals=$('#talkwords').val()

//如果输入的数据为空，则弹窗提示

if (vals=='')

{

alert('请输入数据！')

return

}

//条件下拉列表中的value值是0还是1

var whovals=$('#who').val()

var str=""

//选择A发送还是B发送

if (whovals==0){

str='

A：'+ vals+'

'

}

else{

str='

B：'+ vals+'

'

}

//原有的内容+str,否则会覆盖掉原有内容

$('#words').html($('#words').html()+str)

//发送完数据后清空输入框

$('#talkwords').val('')

})

})

A：你还好吗？

B：嗯，你呢？

A：

B：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。