聊天对话栏
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.arrow-left {
top: 5px;
left: -20px;
position: absolute;
width: 0px;
height: 0px;
border: solid 10px;
border-color: white #44ff86 white white;
}
.send-left {
margin-right: 60px;
margin-left: 60px;
position: relative;
min-height: 40px;
background-color: #44ff86;
border-radius:5px;
}
.arrow-right {
top: 5px;
right: -20px;
position: absolute;
width: 0px;
height: 0px;
border: solid 10px;
border-color: white white white #44aaff;
}
.send-right {
margin-left: 60px;
margin-right: 60px;
position: relative;
background-color: black;
min-height: 40px;
background-color: #44aaff;
border-radius:5px;
}
p {
margin: 15px 15px 15px 15px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var imgs = document.images;
var showImg = document.getElementById("imgShow");
var showDiv = document.getElementById("divshow");
for (var i = 0; i < imgs.length; i++)
{
(function (x) {
imgs[x].onclick = function () {
showImg.src = this.getAttribute("src");
showDiv.style.display = "block";
}
})(i);
}
if (showImg.style.display = "block")
{
document.getElementById("close").onclick = function () {
showDiv.style.display = "none";
};
}
};
</script>
</head>
<body>
<div style="margin-left: 10px; margin-right: 10px; margin-top: 10px;position:relative;">
<div id="divshow" style="position:relative;display:none;">
<span style="font-weight:900;font-size:20px;position:absolute;color:red;z-index:9999;float:right;left:-7px;top:-7px;" id="close">×</span>
<img src="" style="position:absolute;top:10px;left:10px;z-index:9998;" id="imgShow"/>
</div>
<div style="margin-top: 30px;">
<img src="E:\Dev10.2.3\微信客服\Minke.Wiexin.WebApp\MinKe.Weixin\bin\Debug\HeaderPhoto.png" style="width: 40px; height: 40px; float: right;" />
<div class="send-right">
<div class="arrow-right"></div>
<p style="word-break: break-all;">
您好，我是民科客服编号【K1100002】,很高兴为您服务！
</p>
</div>
</div>
<div style="margin-top: 30px;">
<img src="E:\Dev10.2.3\微信客服\Minke.Wiexin.WebApp\MinKe.Weixin\bin\Debug\HeaderPhoto.png" style="width: 40px; height: 40px; float: right;" />
<div class="send-right">
<div class="arrow-right"></div>
<p style="word-break: break-all;">不v刹v不不v刹不v承包才vv刹吧</p>
</div>
</div>
<div style="margin-top: 30px;">
<img src="http://wx.qlogo.cn/mmopen/392ric14QM4F7UrD3oMf52eMib2w0yrP3dr9aT5bNVhiapDDibNFyBo4VTowc58eqfmQw0LT4ynA6QazVb7Zjl41Ww/0" style="width: 40px; height: 40px; float: left;" />
<div class="send-left">
<div class="arrow-left"></div>
<p style="word-break: break-all;"><img src="Image/3.jpg" style="width: 40px; height: 40px; float: left;" />刹v不不v刹不v承包才v刹v不不v刹不v承包才v刹v不不v刹不v承包才v刹v不不v刹不v承包才v刹v不不v刹不v承包才v刹v不不v刹不v承包才v刹v不不v刹不v承包才v</p>
</div>
</div>
<div style="margin-top: 30px;">
<img src="E:\Dev10.2.3\微信客服\Minke.Wiexin.WebApp\MinKe.Weixin\bin\Debug\HeaderPhoto.png" style="width: 40px; height: 40px; float: right;" />
<div class="send-right">
<div class="arrow-right"></div>
<p style="word-break: break-all;">
<img src="E:\Dev10.2.3\微信客服\Minke.Wiexin.WebApp\MinKe.Weixin\bin\Debug\聊天图片\o_Y6AwrnuZ8N5SDj4OjKjncxUsmY_636013198730206136.png" style="width: 50%;" /></p>
</div>
</div>
</div>
</body>
</html>
