htmlでチャットボックスを作る

-2

自分のウェブサイトのチャットボックスを作りたいのですが、ページの右下に固定する必要があります。誰かがそれをクリックするとスライドし、詳細が表示されます。私はhtml、css、jqueryを使用しています。これらのヘルプのみを提案してください。htmlでチャットボックスを作る

出典

2017-08-06 Piyush

達成したコードは？ –

まだ試していません。私は今それをやっていると私は私が私がここからの解決策を得ることができ、私の時間が無駄ではないことができるよりも私が望むものを得ることができない場合、私はthosの質問に尋ねた。 – Piyush

誰かがあなたのために仕事をするなら、時間を無駄にすることはありません...私はあなた自身で最初に試してみることをお勧めします。 – gillyb

chatの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でチャットボックスを作る

答えて

関連する問題