h5网页聊天客服窗口
代码语言：html
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!dtype html>
<html>
<head>
<meta charset="utf-8">
<title>与客服1聊天中</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">
<style>
@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 {
background-image: url('http://repo.bfw.wiki/bfwrepo/image/5e0c6d9519736.png');
background-size: cover;
-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;
}
button:hover {
cursor: pointer;
}
/*css reset*/
body {
position: relative;
}
.chat-wrapper {
font-size: 14px;
color: #fff;
}
/*右侧按钮*/
.chat-support-btn {
position: fixed;
display: inline-block;
top: 50%;
right: 0;
margin-top: -70px;
width: 40px;
height: 40px;
cursor: pointer;
}
.chat-support-btn img {
position: absolute;
border-radius: 50%;
}
/* 对话框*/
.chat-main {
position: fixed;
display: none;
right: 10px;
bottom: 10px;
width: 650px;
height: 800px;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}
/*对话框头部*/
.chat-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: #2596cc;
}
.chat-header a:hover {
cursor: pointer;
}
/*个人信息框*/
.header-info-div {
display: none;
width: 290px;
height: 150px;
margin: -600px 0 0 -300px;
border-radius: 4px;
background-image: url("http://repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90");
}
.header-info-h2 {
display: inline-block;
margin: 15px 0 0 25px;
}
.header-info-span {
position: absolute;
top: 45px;
left: -276px;
}
.chat-close {
position: absolute;
top: 10px;
right: 20px;
padding: 2px;
font-size: 22px;
transform: rotate(90deg);
cursor: pointer;
}
.chat-service-info {
position: relative;
top: 50%;
margin-top: -20px;
height: 40px;
}
.chat-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-image: url("http://repo.bfw.wiki/bfwrepo/icon/5dfc868e48c5d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90");
}
.chat-service-title {
display: inline-block;
vertical-align: middle;
}
.chat-service-detail {
font-size: 12px;
}
/*对话框内容*/
.chat-contain {
overflow-y: auto;
padding: 10px;
height: 380px;
word-wrap: break-word;
background-color: #f9f9f9;
}
.chat-text {
display: inline-block;
position: relative;
padding: 10px;
max-width: 120px;
color: black;
white-space: pre-wrap;
border: 1px solid #ffff7d;
border-radius: 4px;
background-color: #ffff7d;
box-sizing: border-box;
}
.chat-time {
color: #939393;
font-size: 12px;
}
.chat-service-contain {
margin-bottom: 10px;
text-align: left;
}
.chat-service-contain .chat-time {
margin: 0 0 0 37px;
}
.chat-address {
display: inline-block;
max-width: 100px;
white-space: pre-wrap;
}
.chat-service-text {
margin-left: 40px;
}
.chat-service-text:before {
content: '';
position: absolute;
top: 50%;
left: -48px;
width: 35px;
height: 36px;
border: 1px solid transparent;
background-image: url('http://repo.bfw.wiki/bfwrepo/icon/5dfc868e48c5d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90');
border-radius: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.chat-you-contain {
margin-bottom: 10px;
text-align: right;
/* float:right; */
}
.chat-you-contain .chat-time {
margin: 0 20px 0 0;
}
.chat-you-text {
margin-right: 20px;
text-align: left;
}
.chat-you-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 #ffff7d;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
/*客服对话框底部与输入*/
.chat-submit {
position: relative;
padding: 10px;
height: 100px;
color: #000;
word-wrap: break-word;
border-top: 1px solid #ddd;
box-sizing: border-box;
background: white;
}
/*空输入提示*/
.chat-hint {
display: none;
position: absolute;
top: -15px;
left: 20px;
padding: 2px;
width: 140px;
height: 18px;
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;
}
.chat-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
}
.chat-hint-text {
display: inline-block;
vertical-align: middle;
}
/*输入框*/
.chat-input-text {
overflow-y: auto;
display: inline-block;
padding: 5px 10px;
width: 100%;
height: 70px;
vertical-align: middle;
white-space: pre-wrap;
word-wrap: break-word;
resize: none;
box-sizing: border-box;
}
.chat-input-tools {
position: absolute;
width: 100%;
height: 30px;
margin: -25px 0 0 400px;
vertical-align: middle;
}
button {
width: 62px;
height: 28px;
border-radius: 4px;
background-color: #2596cc;
margin: 5px 0;
color: white;
}
.chat-input-tools>button:hover {
cursor: pointer;
}
.simulator-text {
display: inline-block;
width: 200px;
height: 260px;
overflow-y: auto;
padding: 10px 10px;
vertical-align: middle;
color: #000;
white-space: pre-wrap;
word-wrap: break-word;
resize: none;
box-sizing: border-box;
}
.chat-simulator {
display: none;
position: absolute;
left: -230px;
top: 200px;
width: 200px;
height: 300px;
border: 1px solid #cc3333;
border-radius: 4px;
background-color: #2596cc;
box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}
.simulator-btn {
float: right;
padding: 0 10px;
}
</style>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="chat-wrapper">
<div id="btn_open" class="chat-support-btn" draggable="true">
<!-- 聊天窗口缩小后的头像图标 -->
<img src='http://repo.bfw.wiki/bfwrepo/icon/5dfc868e48c5d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90' />
</div>
<div class="chat-main" draggable="true">
<div class='chat-simulator'>
<p id="chat_hint" class="chat-hint">
<span class="chat-hint-icon">!</span><span class="chat-hint-text" style='color:black'>发送内容不能为空</span>
</p>
<textarea class='simulator-text' autofocus placeholder='请写下你希望我对你说的话,按enter键提交（shift+enter键换行）。'></textarea>
<div class='simulator-btn'>
<button class='simulator-submmit'>提交</button>
<button class='simulator-close'>关闭</button>
</div>
</div>
<div cl.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0