Hey friends,

Do check out the tutorial of this project on my YouTube channel and do subscribe to support me!

<!--Created by CodingPorium,2021. Visit https://youtube.com/c/codingporium for more tutorials like this -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Popup Chat Window using HTML,CSS & JS | CodingPorium</title>
  </head>
  <style>
  /*Import Poppins Font*/
    @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

/*CSS Reset*/
*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
  font-family: poppins;
}

/*Background color for whole page*/
body{
  background-color: #5d17cf;
}

/* Button used to open the chat form - fixed at the bottom right of the page */
.open-button{
  background-color: white;
  color:#5d17cf;
  padding:16px 20px;
  border-radius: 8px;
  border:none;
  cursor:pointer;
  opacity:0.8;
  position: fixed;
  bottom:23px;
  right:28px;
  width:280px;
  transition:0.3s;
}

/* The popup chat which is hidden by default */
.chat-popup{
  display:none;
  position: fixed;
  bottom:0;
  right:15px;
  z-index:9;
}

/* Adds styles to the form container */
.form-container{
  max-width:300px;
  padding: 10px;
  background-color: white;
  border-radius: 8px;
}

/* Enables full-width textarea */
.form-container textarea{
  width:100%;
  padding:15px;
  margin:5px 0 22px 0;
  border:none;
  background: #f1f1f1;
  border-radius: 8px;
  resize:none;
  min-height:200px;
}
/* When the textarea gets focus, do something (changes color)*/
.form-container textarea:focus{
  background-color:#ddd;
  outline:none;
}
/* Set a style for the submit/send button */
.form-container .btn{
  background-color: #04aa6d;
  color:white;
  padding:16px 20px;
  border-radius: 8px;
  border:none;
  cursor:pointer;
  width:100%;
  margin-bottom: 10px;
  opacity: 0.8;
  transition: 0.3s;
}
/* Adds a red background color to the cancel button */
.form-container .cancel{
  background-color: red;
}

/* Adds hover effects to all the buttons */
.form-container .btn:hover, .open-button:hover{
  opacity:1;
}
  </style>

  <body>
<center>
  <h1 style="color:white;">CodingPorium Chat Centre</h1>
</center>

<button class="open-button" onclick="openForm()">Chat</button>

<div class="chat-popup" id="myForm">
  <form class="form-container" action="#">
    <h1 style="color:#5d17cf;">Chat</h1>

    <label for="msg">Enter your message below!</label>
    <textarea placeholder="Type your message..." name="msg" required></textarea>

    <button type="submit" class="btn">Send</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Cancel/Close</button>
  </form>
</div>
  </body>

  <script>
  //function to open the popup
  function openForm(){
    document.getElementById("myForm").style.display="block";
  }
  //function to close the popup
  function closeForm(){
    document.getElementById("myForm").style.display="none";
  }
</script>
</html>

Post a Comment

Previous Post Next Post