一直都想写一个对话框，正好公司买了一个，就照着外观自己也写一个，每次写都会碰到意想不到的情况，通过解决这些情况，就很好的了解和学习了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 class="dialogue-service-img">头像</i><div class="dialogue-service-title"><p class="dialogue-service-name">于飞客服</p><p class="dialogue-service-detail">于飞客服支持平台</p></div></div></div><div id="dialogue_contain" class="dialogue-contain"><p class="dialogue-service-contain"><span class="dialogue-text dialogue-service-text">您好，请提问</span></p><!-- <p class="dialogue-customer-contain"><span class="dialogue-text dialogue-customer-text">我有个问题</span></p> --></div><div class="dialogue-submit"><p id="dialogue_hint" class="dialogue-hint"><span class="dialogue-hint-icon">!</span><span class="dialogue-hint-text">发送内容不能为空</span></p><textarea id="dialogue_input" class="dialogue-input-text" placeholder="请输入您的问题，按Enter键提交（shift+Enter换行）"></textarea><div class="dialogue-input-tools">小工具预留位置</div></div></div>
</div>
</body>
</html>

CSS代码

@charset "utf-8";
/*公共样式*/
html{font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;}
body{-webkit-overflow-scrolling:touch;margin:0;}
ul{margin:0;padding:0;list-style:none;outline:none;}
dl,dd{margin:0;}
a{display:inline-block;margin:0;padding:0;text-decoration:none;background:transparent;outline:none;color:#000;}
a:link,a:visited,a:hover,a:active{text-decoration:none;color:currentColor;}
a,dt,dd{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;}
img{border:0;}
p{margin:0;}
input,button,select,textarea{margin:0;padding:0;border:0;outline:0;background-color:transparent;}
/*css reset*/
body {position: relative;
}.dialogue-wrapper {font-size: 14px;color: #fff;
}
/*右侧点击按钮*/
.dialogue-wrapper .dialogue-support-btn {position: fixed;display: inline-block;top: 50%;right: 0;margin-top: -70px;padding: 10px 0;width: 40px;height: 120px;font-size: 16px;font-weight: 500;text-align: center;cursor: pointer;border-top-left-radius: 5px;border-bottom-left-radius: 5px;box-shadow: -1px 1px 5px rgba(0, 0, 0, .4);background-color: #5d94f3;
}.dialogue-wrapper .dialogue-support-btn .dialogue-support-icon {position: relative;display: inline-block;margin-bottom: -2px;width: 20px;height: 16px;border-radius: 4px;background-color: #fff;
}.dialogue-wrapper .dialogue-support-btn .dialogue-support-icon:before {content: '';position: absolute;left: 50%;bottom: -6px;margin-left: -3px;width: 0;height: 0;border-left: 4px solid transparent;border-right: 4px solid transparent;border-top: 6px solid #fff;
}.dialogue-wrapper .dialogue-support-btn .dialogue-support-line {display: inline-block;width: 100%;height: 1px;background-color: #ddd;
}.dialogue-wrapper .dialogue-support-btn .dialogue-support-text {padding: 5px 0;letter-spacing: 4px;writing-mode: vertical-rl;-webkit-user-select: none;
}/*底部客服对话框*/
.dialogue-wrapper .dialogue-main {position: fixed;display: none;right: 100px;bottom: 10px;width: 400px;height: 600px;border-radius: 4px;box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}/*客服对话框头部*/
.dialogue-wrapper .dialogue-main .dialogue-header {position: relative;padding: 10px;height: 80px;border-top-left-radius: 4px;border-top-right-radius: 4px;box-shadow: 0 0 5px rgba(0, 0, 0, .2);background-color: #5d94f3;
}.dialogue-wrapper .dialogue-main .dialogue-close {position: absolute;top: 10px;right: 20px;padding: 2px;font-size: 22px;transform: rotate(90deg);cursor: pointer;
}.dialogue-wrapper .dialogue-main .dialogue-service-info {position: relative;top: 50%;margin-top: -20px;height: 40px;
}.dialogue-wrapper .dialogue-main .dialogue-service-img {display: inline-block;margin: 0 10px 0 20px;width: 40px;height: 40px;text-align: center;line-height: 40px;vertical-align: middle;color: #000;border-radius: 50%;box-shadow: 1px 1px 4px rgba(0, 0, 0, .2);background-color: #fff;
}.dialogue-wrapper .dialogue-main .dialogue-service-title {display: inline-block;vertical-align: middle;
}.dialogue-wrapper .dialogue-main .dialogue-service-detail {font-size: 12px;
}/*客服对话框内容*/
.dialogue-wrapper .dialogue-main .dialogue-contain {overflow-y: auto;padding: 10px;height: 380px;word-wrap: break-word;background-color: #f9f9f9;
}.dialogue-wrapper .dialogue-main .dialogue-text {display: inline-block;position: relative;padding: 10px;max-width: 120px;white-space: pre-wrap;border: 1px solid #09d07d;border-radius: 4px;background-color: #09d07d;box-sizing: border-box;
}.dialogue-wrapper .dialogue-main .dialogue-service-contain {margin-bottom: 10px;text-align: left;
}.dialogue-wrapper .dialogue-main .dialogue-service-text {margin-left: 20px;
}.dialogue-wrapper .dialogue-main .dialogue-service-text:before {content: '';position: absolute;top: 50%;left: -10px;width: 0;height: 0;border-top: 6px solid transparent;border-bottom: 6px solid transparent;border-right: 10px solid #09d07d;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);
}.dialogue-wrapper .dialogue-main .dialogue-customer-contain {margin-bottom: 10px;text-align: right;
}.dialogue-wrapper .dialogue-main .dialogue-customer-text {margin-right: 20px;
}.dialogue-wrapper .dialogue-main .dialogue-customer-text:after {content: '';position: absolute;top: 50%;right: -10px;width: 0;height: 0;border-top: 6px solid transparent;border-bottom: 6px solid transparent;border-left: 10px solid #09d07d;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);
}/*客服对话框底部与输入*/
.dialogue-wrapper .dialogue-main .dialogue-submit {position: relative;padding: 10px;height: 100px;color: #000;word-wrap: break-word;border-top: 1px solid #ddd;box-sizing: border-box;
}/*空输入提示*/
.dialogue-wrapper .dialogue-main .dialogue-hint {position: absolute;top: -15px;left: 20px;padding: 2px;width: 140px;height: 18px;opacity: 0;font-size: 12px;text-align: center;line-height: 18px;border: 1px solid #ddd;box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);background-color: #fff;
}.dialogue-wrapper .dialogue-main .dialogue-hint-icon {display: inline-block;width: 18px;height: 18px;margin-right: 5px;font-size: 14px;font-style: italic;font-weight: 700;vertical-align: middle;line-height: 18px;color: #fff;border-radius: 50%;background-color: #5d94f3
}.dialogue-wrapper .dialogue-main .dialogue-hint-text {display: inline-block;vertical-align: middle;
}/*输入框*/
.dialogue-wrapper .dialogue-submit .dialogue-input-text {overflow-y: auto;display: inline-block;padding: 5px 10px;width: 295px;height: 70px;vertical-align: middle;white-space: pre-wrap;word-wrap: break-word;resize: none;border-right: 1px solid #ddd;box-sizing: border-box;
}.dialogue-wrapper .dialogue-submit .dialogue-input-tools {display: inline-block;width: 80px;height: 80px;vertical-align: middle;
}

HTML+CSS+JS在线客服对话框迷你版相关推荐

客服对话框php代码,在线客服对话框
摘要: &聊天室 .box1{width:320px;height:500px;box-shadow: 5px 5px 5px 0 grey;border-radius:5px;backgro ...
QQ在线客服代码，飘浮在右侧的QQ客服js特效演示
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
在线客服系统源码开发实战总结：动态加载js文件实现粘贴一段js的sdk代码，直接引入插件效果...
常见的在线客服系统中,或者是统计代码中,粘贴一段js代码,就能引入某个插件的效果.这个是怎么实现的呢? 原理非常的简单: 对于不同的加载文件类型创建不同的节点,然后添加各自的属性,最后扔到head 标 ...
css+JavaScript+html打造的非常简单漂亮的网站在线客服代码，鼠标划过可以弹出窗口
下面是一网站在线客服css样式 * {padding: 0;margin: 0;border: none; } ul, ol, li {list-style: none; } em, i {font- ...
ttkefu迷你小窗口“在线客服咨询”文字怎么改?
登录网站后,左下角或右下角弹出的迷你对话框中,对话框的标题默认是中文"在线客服咨询",有客户问这个的标题可以修改吗,比如换成英文之类的,这个当然是可以的,那么要怎么修改呢?如图所示 ...
vue.js客服系统实时聊天项目开发（十八）仿淘宝商品页面点在线客服传递产品卡片...
我们在使用淘宝的时候,在商品页面点击在线客服,跳转到客服聊天页以后,会浮动出当前产品信息,可以把产品信息发给客服现在我们也实现了类似功能,可以带着产品信息进聊天页面在访客聊天连接中,加入extra ...
QQ在线客服JS代码，自适应漂浮在网页右侧
漂浮在网页右侧的QQ在线客服代码,自适应浏览器调试,当你拖动滚动条的时候它会自动计算始终漂浮于某一位置,而且是动画特效,很不错,你也可以把它改成一个漂浮广告,只用换掉表格里的内容就可以了. <h ...
php js在线聊天,js实现智能在线客服系统
摘要:看似简单,但自己做的时候总是记不住那些方法和属性,还是多记多练习 DOM实战:模拟智能在线客服系统 div:nth-child(1) { width: 450px; height: 650px; ...
在线咨询HTML问题,在线客服案例HTML css样式
摘要:html> DOM实战模拟智能在线客服系统 div:nth-child(1html> DOM实战模拟智能在线客服系统 div:nth-child(1){ width: 450px; ...
WeLive开源PHP在线客服系统源码
介绍: WeLive5是一个企业级的在线客服系统, 程序小巧使用简单, 主要特点: PHP开发, 基于WebSocket通讯技术, 具有请求与推送全双工功效, 极速高效; 访客窗口多达5种配色方案,同 ...

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

效果

HTML代码

CSS代码

HTML+CSS+JS在线客服对话框迷你版相关推荐

最新文章

热门文章