Javascript 在html中制作聊天框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45533168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make chat box in html
提问by Piyush
I want to make a chat box for my website and it should be fixed at the bottom right position of page. When someone clicks on it that it should slide up and details are visible in it. I am using html,css,jquery. Suggest help from these only.
我想为我的网站制作一个聊天框，它应该固定在页面的右下角位置。当有人点击它时，它应该向上滑动并且可以在其中看到详细信息。我正在使用 html、css、jquery。仅从这些建议帮助。
回答by Oktay K?SE
You can look at examples of socket.io for chat. https://socket.io/get-started/chat/
您可以查看 socket.io 的示例进行聊天。 https://socket.io/get-started/chat/
Desing: https://codepen.io/oktaykose/pen/aypyvg
设计：https: //codepen.io/oktaykose/pen/aypyvg
.chat-box{
position: absolute;
bottom: 0;
right: 0;
}
.box{
transition: height 1s ease-out;
width: 300px;
height: 0px;
background: red;
z-index: 9999;
}
.open:hover>.box{
height:400px;
transition: height 1s ease-out;
}
.open {
text-align: center;
font-size: 20px;
border: 2px solid #3F51B5;
background: #673AB7;
color: #eaeaea;
}<div class="chat-box">
<div class="open">Open
<div class="box">
<br>
Test
<br>
</div>
<div>
<div>回答by amit wadhwani
Below is the sample as per your requirement.
以下是根据您的要求提供的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.LiveChat{
position:absolute;
bottom:0%;
height:10%;
background-color:red;
}
</style>
<script>
$(document).ready(function()
{
$("#chatBtn").click(function()
{
$(".LiveChat").css("height","30%");
});
});
</script>
</head>
<body>
<div class="LiveChat">
<button id="chatBtn">Live chat</button>
<p>rest of details below</p>
</div>
</body>
</html>
Please mark it as answer if its matching your need.
如果它符合您的需要，请将其标记为答案。
