好资源导航 » 文章资讯 » jQuery实现聊天对话框

jQuery实现聊天对话框

2023-08-01 22:46:04 78

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

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








Document

.talk_con{
width:600px;
height:500px;
border:1pxsolid#666;
margin:50pxauto0;
background:#f9f9f9;
}

.talk_show{
width:580px;
height:420px;
border:1pxsolid#666;
background:#fff;
margin:10pxauto0;
overflow:auto;
}

.talk_input{
width:580px;
margin:10pxauto0;
}

.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;
}

.atalkspan{
display:inline-block;
background:#0181cc;
border-radius:10px;
color:#fff;
padding:5px10px;
}

.btalk{
margin:10px;
text-align:right;
}

.btalkspan{
display:inline-block;
background:#ef8201;
border-radius:10px;
color:#fff;
padding:5px10px;
}








A：你还好吗？

B：嗯，你呢？

A： B：

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

jQuery实现聊天对话框

热门推荐

随机推荐