<div class="chat-box">
<div class="chat-box-header">
<h3>Message Us</h3>
<p>
<i class="fa fa-times"></i>
</p>
</div>
<div class="chat-box-body">
<div class="chat-box-body-send">
<p>This is my message.</p>
<span>12:00</span>
</div>
<div class="chat-box-body-receive">
<p>This is my message.</p>
<span>12:00</span>
</div>
<div class="chat-box-body-receive">
<p>This is my message.</p>
<span>12:00</span>
</div>
<div class="chat-box-body-send">
<p>This is my message.</p>
<span>12:00</span>
</div>
<div class="chat-box-body-send">
<p>This is my message.</p>
<span>12:00</span>
</div>
<div class="chat-box-body-receive">
<p>This is my message.</p>
<span>12:00</span>
</div>
<div class="chat-box-body-receive">
<p>This is my message.</p>
<span>12:00</span>
</div>
<div class="chat-box-body-send">
<p>This is my message.</p>
<span>12:00</span>
</div>
</div>
<div class="chat-box-footer">
<button id="addExtra">
<i class="fa fa-plus"></i>
</button>
<input placeholder="Enter Your Message" type="text">
<i class="send far fa-paper-plane"></i>
</div>
</div>
<div class="chat-button">
<span></span>
</div>
<div class="modal">
<div class="modal-content">
<span class="modal-close-button">×</span>
<h1>Add What you want here.</h1>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Raleway|Ubuntu&display=swap');
body{
background: #E8EBF5;
padding: 0;
margin: 0;
font-family: Raleway;
}
.chat-box{
height: 90%;
width: 400px;
position: absolute;
margin: 0 auto;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
z-index: 15;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.005);
right: 0;
bottom: 0;
margin: 15px;
background: #fff;
border-radius: 15px;
visibility: hidden;
&-header{
height: 8%;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
display: flex;
font-size: 14px;
padding: .5em 0;
box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow:0 0 3px rgba(0,0,0,.2), 0 -1px 10px rgba(172, 54, 195, 0.3);
box-shadow: 0 1px 10px rgba(0,0,0,0.025);
& h3{
font-family: ubuntu;
font-weight: 400;
float: left;
position: absolute;
left: 25px;
}
& p{
float: right;
position: absolute;
right: 16px;
cursor: pointer;
height: 50px;
width: 50px;
text-align: center;
line-height: 3.25;
margin: 0;
}
}
&-body{
height: 75%;
background: #f8f8f8;
overflow-y: scroll;
padding: 12px;
&-send{
width: 250px;
float: right;
background: white;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,.015);
margin-bottom: 14px;
& p{
margin: 0;
color: #444;
font-size: 14px;
margin-bottom: .25rem;
}
& span{
float: right;
color: #777;
font-size: 10px;
}
}
&-receive{
width: 250px;
float: left;
background: white;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,.015);
margin-bottom: 14px;
& p{
margin: 0;
color: #444;
font-size: 14px;
margin-bottom: .25rem;
}
& span{
float: right;
color: #777;
font-size: 10px;
}
}
&::-webkit-scrollbar {
width: 5px;
opacity: 0;
}
}
&-footer{
position: relative;
display: flex;
& button{
border: none;
padding: 16px;
font-size: 14px;
background: white;
cursor: pointer;
&:focus{
outline:none;
}
}
& input{
padding: 10px;
border: none;
-webkit-appearance: none;
border-radius: 50px;
background: whitesmoke;
margin: 10px;
font-family: ubuntu;
font-weight: 600;
color: #444;
width: 280px;
&:focus{
outline: none;
}
}
& .send{
vertical-align: middle;
align-items: center;
justify-content: center;
transform: translate(0px, 20px);
cursor: pointer;
}
}
}
.chat-button{
padding: 25px 16px;
background: #2C50EF;
width: 120px;
position: absolute;
bottom: 0;
right: 0;
margin: 15px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
box-shadow: 0 2px 15px rgba(#2C50EF,.21);
cursor: pointer;
& span{
&::before{
content: '';
height: 15px;
width: 15px;
background: #47cf73;
position: absolute;
transform: translate(0, -7px);
border-radius: 15px;
}
&::after{
content: "Message Us";
font-size: 14px;
color: white;
position: absolute;
left: 50px;
top: 18px;
}
}
}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 24rem;
border-radius: 0.5rem;
}
.modal-close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
z-index: 30;
}
@media screen only and(max-width: 450px)
{
.chat-box{
min-width: 100% !important;
}
}
View Compiled
$('.chat-button').on('click' , function(){
$('.chat-button').css({"display": "none"});
$('.chat-box').css({"visibility": "visible"});
});
$('.chat-box .chat-box-header p').on('click' , function(){
$('.chat-button').css({"display": "block"});
$('.chat-box').css({"visibility": "hidden"});
})
$("#addExtra").on("click" , function(){
$(".modal").toggleClass("show-modal");
})
$(".modal-close-button").on("click" , function(){
$(".modal").toggleClass("show-modal");
})
