HTML+CSS+JS在线客服对话框迷你版

已于 2022-09-01 16:39:30 修改
阅读量7.8k 收藏 49
点赞数 4
分类专栏： 站长技术交流 文章标签： html javascript css
于 2021-01-15 14:44:34 首次发布
本文链接：https://blog.csdn.net/q906270629/article/details/112667435
版权
一直都想写一个对话框，正好公司买了一个，就照着外观自己也写一个，每次写都会碰到意想不到的情况，通过解决这些情况，就很好的了解和学习了js知识。效果废话不多说，直接上代码HTML代码<!doctype html><html><head><meta charset="utf-8"><title>客服聊天</title><meta name="viewport" content="width=
摘要由CSDN通过智能技术生成

一直都想写一个对话框，正好公司买了一个，就照着外观自己也写一个，每次写都会碰到意想不到的情况，通过解决这些情况，就很好的了解和学习了js知识。

效果

废话不多说，直接上代码

HTML代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>于飞SEO客服聊天</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="styles/style.css">
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div class="dialogue-wrapper">
    <div id="btn_open" class="dialogue-support-btn">
        <i class="dialogue-support-icon"></i>
        <i class="dialogue-support-line"></i>
        <span class="dialogue-support-text">联系客服</span>
    </div>
    <div class="dialogue-main">
        <div class="dialogue-header">
            <i id="btn_close" class="dialogue-close">></i>
            <div class="dialogue-service-info">
                <i
最低0.47元/天 解锁文章
于飞SEO
关注
  • 4
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论
专栏目录
如何配置网页端联系客服对话框
Stupid_Insect的博客
12-04 1208
1.本次利用的是环云客服云，登录环信客服云。 2.设置对话框 <head> <script> window.easemobim = window.easemobim || {}; easemobim.config = { hide: true, autoConnect: true }; </script> <script src='//kefu.easemob.com/webim/easemob.js'&gt
html在线客服,网页在线客服代码_jQuery QQ客服
weixin_30050671的博客
05-31 1257
jquery悬浮的在线客服代码$(document).ready(function(){$("#floatShow").bind("click",function(){$("#onlineService").animate({width:"show", opacity:"show"}, "normal" ,function(){$("#onlineService").show();});$("#f...
CSS+HTML+JavaScript打造的悬浮的在线客服源码.rar
03-05
CSS+HTML+JavaScript打造的悬浮的在线客服源码，其中包含css html 和JavaScript，在css中可以更改窗口样式。
html模拟聊天框实现，仅用html，css，js实现
m0_72190449的博客
12-23 9525
html模拟聊天框一共分为两大部分，一部分是登录，一部分是聊天框内容。
客服对话框php代码,模拟在线客服对话框
weixin_39626409的博客
03-16 469
摘要：html>TitleTitlediv:nth-child(1){width:450px;height:650px;background-color:lightskyblue;margin:30pxauto;color:#333;box-shadow:2px2px2px#808080;}h2{text-align:center;margin-bottom:-10p...
客服对话框php代码,在线客服对话框
weixin_28813401的博客
03-16 282
摘要：&聊天室.box1{width:320px;height:500px;box-shadow: 5px 5px 5px 0 grey;border-radius:5px;background-color: slateblue;}/* n从1开始 */div:nth-child(2){width:300px;height:300px;border-radius:3px;backgroun...
客服对话框
qq_38677540的博客
07-07 204
客服对话框
html 悬浮qq,js悬浮QQ在线客服代码(支持拖动)
weixin_28685487的博客
06-25 1070
特效描述：js悬浮 QQ在线客服 支持拖动，js浮动层特效制作悬浮在线客服代码，放置在线QQ等聊天按钮的在线客服浮动层代码，支持拖动效果，可随意在页面上拖动位置，随着浏览器滚动始终保持在悬浮在页面上的js代码。代码结构1. 引入JS2. HTML代码*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}/* KeFuDiv */.Ke...
js-实现在线客服功能
weixin_45630548的博客
08-26 1873
* { margin: 0; padding: 0; } ul li { list-style: none; } .online-service { position: fixed; bottom: 100px; right: 50px; } #online_list { width: 50px; } #online_list li { width: 50px; height: 50px; position: rela.
JS+CSS实现可展开/收起的QQ在线客服悬浮代码
weixin_30608503的博客
04-08 312
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g...
js 腾讯QQ和淘宝旺旺在线客服代码
05-25
js 腾讯QQ和淘宝旺旺在线客服代码
js固定在网站底部在线客服代码
06-10
非常简单的纯div+css+js实现固定在网站底部在线客服代码，不随页面滚动一直固定在网页底部的QQ客服代码。
html+css+js音乐在线
最新发布
06-17
html css js网页设计html+css+js音乐在线html+css+js音乐在线html+css+js音乐在线html+css+js音乐在线html+css+js音乐在线html+css+js音乐在线html+css+js音乐在线html+css+js音乐在线html+css+js音乐在线...
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
html+css+js科幻后台登录界面模板
04-10
html+css+js科幻后台登录界面模板，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者...
html+css+js网页设计源代码.zip
05-31
在这个"html+css+js网页设计源代码.zip"中，`catcatcat-master`可能是一个项目目录，暗示着这个网页设计是以猫为主题。HTML文件通常会包含各种元素，如`<head>`（头部信息）、`<body>`（主体内容）、`<header>`...
html页面弹出 聊天框,网页弹出在线交流聊天窗口的功能如何实现 - 快商通
weixin_30650059的博客
06-09 5268
网页弹出在线交流聊天窗口的功能如何实现作者：快商通发布时间：2020年11月05日阅读量：摘要：网页在线聊天功能是在企业网站中用户跟客服人员在线咨询沟通交流的常见功能，可以通过在网页中添加在线客服js代码调用客服聊天窗口的方式快速实现。本文将详细介绍网页弹出在线交流对话框的方法。网页在线聊天网页在线聊天是什么网页在线聊天是网站常见的即时通讯功能，用户进入网站进行浏览时页面会自动弹出请求聊天的窗口，...
（实用）网页在线QQ客服咨询html代码
热门推荐
hom_va的专栏
06-07 2万+
步骤： 1. 首先在QQ商家设置要代码中的QQ号码（2632674343）为在线状态：http://shang.qq.com/widget/set.php 2. 在html中加入以下代码： 并给这个a标签加上css样式： .qqzixun{ width: 30px; height: 100px; background-color: #15b1ea;
聊天框小案例
weixin_57762552的博客
02-22 606
聊天框案例简单的用到了if判断 如图： 首先新建一个html文件，写好我们需要的内容 两个对话框，但两个对话框是在一个div里的，而这个div会起到关键的作用，因为在写js代码时要获取到它，所有需要提前给它设置好id以方便后面获取。 下拉框，下拉框里有两个内容所有要写两个option，也要给两个option设置好value值，第一个是0，第二个是1.这样是为了后面更好的进行判断，当然也要给下拉框设置好id以方便后面获取。 输入框和按钮也要设置id以方便后面获取。但要注意我这里的发送按钮...
用HTML+CSS+JS写一个在线客服对话框代码
04-16
好的，这是一个简单的在线客服对话框的 HTML、CSS、JS 代码示例： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>在线客服对话框</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .chatbox { position: fixed; bottom: 20px; right: 20px; width: 300px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; box-shadow: 0px 0px 5px #ccc; z-index: 9999; } .chatbox-header { padding: 10px; border-bottom: 1px solid #ccc; background-color: #f0f0f0; border-radius: 5px 5px 0 0; } .chatbox-header h2 { margin: 0; font-size: 16px; font-weight: bold; color: #333; } .chatbox-body { padding: 10px; min-height: 200px; max-height: 400px; overflow-y: scroll; scroll-behavior: smooth; word-wrap: break-word; color: #555; font-size: 14px; } .chatbox-body p { margin: 0 0 10px 0; padding: 5px 10px; border-radius: 10px; background-color: #f0f0f0; max-width: 70%; } .chatbox-footer { padding: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; border-top: 1px solid #ccc; border-radius: 0 0 5px 5px; } .chatbox-footer input[type=text] { flex: 1; padding: 10px; border: none; border-radius: 5px; box-shadow: 0px 0px 5px #ccc; margin-right: 10px; font-size: 14px; } .chatbox-footer input[type=submit] { padding: 10px 20px; border: none; border-radius: 5px; background-color: #005ea5; color: #fff; font-size: 14px; cursor: pointer; transition: background-color 0.3s ease-in-out; } .chatbox-footer input[type=submit]:hover { background-color: #003e70; } </style> </head> <body> <div class="chatbox"> <div class="chatbox-header"> <h2>在线客服</h2> </div> <div class="chatbox-body"> <p>欢迎来到在线客服对话框！</p> </div> <div class="chatbox-footer"> <input type="text" placeholder="请输入您的问题..."> <input type="submit" value="发送"> </div> </div> <script> // 获取 DOM 元素 const chatbox = document.querySelector('.chatbox'); const input = chatbox.querySelector('input[type=text]'); const submitBtn = chatbox.querySelector('input[type=submit]'); const chatboxBody = chatbox.querySelector('.chatbox-body'); // 提交问题 function submitQuestion() { const question = input.value.trim(); if (question !== '') { // 发送问题 const questionP = document.createElement('p'); questionP.textContent = question; questionP.style.textAlign = 'right'; chatboxBody.appendChild(questionP); // 清空输入框 input.value = ''; // 模拟机器人回答 setTimeout(function() { // 机器人回答 const answer = '非常抱歉，目前无法回答您的问题。'; const answerP = document.createElement('p'); answerP.textContent = answer; chatboxBody.appendChild(answerP); }, 1000); } }; // 绑定按钮事件 submitBtn.addEventListener('click', submitQuestion); // 回车也可以提交问题 input.addEventListener('keydown', function(e) { if (e.key === 'Enter') { submitQuestion(); } }); </script> </body> </html> ``` 以上代码实现了一个简单的在线客服对话框，用户可以通过文本框输入问题，机器人会自动回复一些文本。你可以根据自己的需要修改样式和代码逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

于飞SEO

如果对你有帮助，就是我的动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值