I want create a chatbox in asp.net and i want create it step by step if someone helps me
I’ve already read about signalR and not much understanding it
Now i want begin to create the popup bottom right window first
Please help
Hi mahjoubi,
Check this example.
HTML
<html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body { font-family: Arial; font-size: 10pt; } * { box-sizing: border-box; } .open-button { background-color: #0090CB; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8; position: fixed; bottom: 23px; right: 28px; width: 100px; } .chat-popup { display: none; position: fixed; bottom: 0; right: 15px; border: 3px solid #f1f1f1; z-index: 9; } .form-container { max-width: 300px; padding: 10px; background-color: #0090CB; } .form-container textarea { width: 100%; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; resize: none; min-height: 200px; } .form-container textarea:focus { background-color: #ddd; outline: none; } .form-container .btn { background-color: #4CAF50; color: white; padding: 16px 20px; border: none; cursor: pointer; width: 100%; margin-bottom: 10px; opacity: 0.8; } .form-container .cancel { background-color: red; cursor: pointer; color:white; } .form-container .btn:hover, .open-button:hover { opacity: 1; } </style> <script type="text/javascript"> function openForm() { document.getElementById("myForm").style.display = "block"; } function closeForm() { document.getElementById("myForm").style.display = "none"; } </script> </head> <body> <button class="open-button" onclick="openForm()">Chat</button> <div class="chat-popup" id="myForm"> <div class="form-container"> <div> <div style="float:left"><h1>Chat</h1></div> <div style="float:right;" class="cancel" onclick="closeForm()"> X </div> </div> <br /><br /><br /><br /><br /> <div> <label for="msg"><b>Message</b></label> <textarea placeholder="Type message.." name="msg" required></textarea> <button type="submit" class="btn">Send</button> </div> </div> </div> </body> </html>
Demo
© COPYRIGHT 2025 ASPSnippets.com ALL RIGHTS RESERVED.