在html中創建聊天框

-2

我想爲我的網站創建一個聊天框，它應該固定在頁面的右下角位置。當有人點擊它時，它應該滑動並且細節在其中可見。我使用html，css，jquery。僅從這些建議幫助。在html中創建聊天框

來源

2017-08-06 Piyush

你實現了哪些代碼？ –

我還沒試過呢。我現在正在做，並肩並肩地問我，如果我不能得到我想要的東西，我可以從這裏得到解決方案，我的時間不會被浪費。 – Piyush

我明白了，如果有人爲你做了這項工作，那麼你的時間永遠不會浪費......我建議你先嚐試一下，然後在這裏張貼你所擁有的東西，這裏的人會嘗試糾正你的方法。 – gillyb

你可以看看聊天的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>

來源

2017-08-06 15:11:41

下面是示例按照您的要求。

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

請把它標記爲答案，如果它符合您的需求。

來源

2017-08-06 15:16:04

在html中創建聊天框

回答

相關問題