Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a Popup Chat Window with CSS and JavaScript
On a website, in the bottom-right, you must have seen a popup chat windows. Can be mostly seen on a website hosting website. This allows a user to directly ask sales questions before buying the product. Such popup chat window can be easily created on a web page with CSS. Let us see how.
Create the chat button
First, create a button using the <button> element −
<button class="openChatBtn" onclick="openForm()">Chat</button>
Position the chat button
To position the chat button, use the position property with the value fixed. The right and bottom properties are used to position and place the button on bottom-right −
.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;
}
Function to open the chat window
A custom function gets called when the button is clicked to open the chat window. Here, the display property is set to block −
function openForm() {
document.querySelector(".openChat").style.display = "block";
}
Form for the chat window
Whenever a chat popup is clicked on a web page, it consists of a form. That form is created using the <form> element. Send and close buttons are set in this form to send the information or close the form any time"
<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</butto> </form>
Function to close the chat window
A custom function gets called when the button is clicked to close the chat window. Here, the display property is set to none −
function closeForm() {
document.querySelector(".openChat").style.display = "none";
}
Style the chat window
The position is set fixed for the chat window. The display to set to none since we don't want the chat window to be visible always. The window can be seen only when the chat button is clicked −
.openChat {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #ff08086b;
z-index: 9;
}
Example
To create popup chat window with CSS and JavaScript, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<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</butto>
</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>
4K+ Views
