- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a popup chat window with CSS and JavaScript?
To create popup chat window with CSS and JavaScript, the code is as follows −
Example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: border-box; } .openChatBtn { background-color: rgb(123, 28, 179); color: white; padding: 16px 20px; border: none; font-weight: 500; font-size: 18px; cursor: pointer; opacity: 0.8; position: fixed; bottom: 23px; right: 28px; width: 280px; } .openChat { display: none; position: fixed; bottom: 0; right: 15px; border: 3px solid #ff08086b; z-index: 9; } form { max-width: 300px; padding: 10px; background-color: white; } form textarea { width: 100%; font-size: 18px; padding: 15px; margin: 5px 0 22px 0; border: none; font-weight: 500; background: #d5e7ff; color: rgb(0, 0, 0); resize: none; min-height: 200px; } form textarea:focus { background-color: rgb(219, 255, 252); outline: none; } form .btn { background-color: rgb(34, 197, 107); color: white; padding: 16px 20px; font-weight: bold; border: none; cursor: pointer; width: 100%; margin-bottom: 10px; opacity: 0.8; } form .close { background-color: red; } form .btn:hover, .openChatBtn:hover { opacity: 1; } </style> </head> <body> <h1>Popup Chat Window Example</h1> <h2>Click the below button to start chatting</h2> <button class="openChatBtn" onclick="openForm()">Chat</button> <div class="openChat"> <form> <h1>Chat</h1> <label for="msg"><b>Message</b></label> <textarea placeholder="Type message.." name="msg" required></textarea> <button type="submit" class="btn">Send</button> <button type="button" class="btn close" onclick="closeForm()"> Close </button> </form> </div> <script> document .querySelector(".openChatBtn") .addEventListener("click", openForm); document.querySelector(".close").addEventListener("click", closeForm); function openForm() { document.querySelector(".openChat").style.display = "block"; } function closeForm() { document.querySelector(".openChat").style.display = "none"; } </script> </body> </html>
Output
The above code will produce the following output −
On clicking the Chat button the chat window will popup as follows −
- Related Articles
- How to create a chat message with CSS?
- How to create a modal popup using JavaScript and CSS?
- How do I create a popup window in Tkinter?
- How do I create a popup window using Tkinter?
- How to center a popup window on screen using JavaScript?
- How do I create a popup window using Tkinter Program?
- How to create a browser window example with CSS?
- How to handle ESC keydown on JavaScript popup window?
- How to create tabs with CSS and JavaScript?
- How to create popups with CSS and JavaScript?
- How to create a "sticky" navbar with CSS and JavaScript?
- How to create a responsive slideshow with CSS and JavaScript?
- How to create a Modal Box with CSS and JavaScript?
- How to create a scroll indicator with CSS and JavaScript?
- How to create a collapsible section with CSS and JavaScript?

Advertisements