Question

我想为我的网站制作一个聊天框，它应该固定在页面的右下角。当有人点击它时，它应该向上滑动并且细节在其中可见。我正在使用html，css，jquery。仅建议这些帮助。

Answer 1

您可以查看socket.io的示例以进行聊天。 https://socket.io/get-started/chat/

德兴： 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>

Answer 2

以下是根据您的要求提供的样本。

<!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>

如果符合您的需要，请将其标记为答案。

在html中创建聊天框

2 个答案: