chat popup box in jquery demo – Bootstrap 4 Chat Box Design Like Facebook

chat popup box in jquery demo – Popup Chat Box Google Style Chat Box Popup using jQuery and CSS Example with demo.

Bootstrap 4 Chat Popup Box Desing Like Google Plus – chat popup box in jquery demo

Bootstrap example of Open in chat (popup-box chat-popup) using HTML code, Javascript source code, jQuery, and CSS.

index.html

Kinjal Peris
























Hii








hiii 

How are you ?


Kinjal, Jan 25, 6:20 PM



 

nice 

Are you fine ?








Yes always





https://www.pakainfo.com/




Byy

1 min

CSS Code

.chat-main{
position: fixed;
width: 260px;
bottom: 0;
right: 310px;
}
.header-one{
background: #404040;
}
.name h6{
display: inline-block;
font-size: 14px;
}
.options i,.options .arrow-up{
height: 25px;
width: 25px;
}
.options i{
color: #B2B2B2;
font-size: 16px;
cursor: pointer;
}
.options .hover:hover, .options .arrow-up:hover{
background: #737373;
}
.options .arrow-up{
display: inline-block;
line-height: 0;
}
.options .hover:hover, .options .arrow-up:hover .fa-arrow-up{
color: #fff;
}
.options .fa-arrow-up{
transform: rotate(40deg);
}
.header-two{
border-top: 2px solid #35AC19;
background: #ECEFF1;
color: #5E6060;
padding: 8px 0px 4px 8px;
box-shadow: 0px 6px 13px -7px #c1c1c1;
z-index: 1000;
position: absolute;
}
.options-left i, .options-right i{
font-size: 20px;
 cursor: pointer;
}
.options-left i:hover, .options-right i:hover{
color: #000;
}
.chats{
height: 285px;
overflow-x: scroll;
overflow-x: hidden;
background: #ECEFF1;
position: relative;
top: 35px;
}
.chats ul li{
display: inline-block;
list-style: none;
clear: both;
font-size: 13px;
}
.live-chat{
position: relative;
}
.live-chat:after{
content: "";
width:0;
height:0;
top: 0px;
right: -8px;
position: absolute;
border-top: 8px solid #CFD8DC;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}
.live-chat p{
background: #CFD8DC;
}
.sender-img{
display: inline;
}
.sender-img img{
width: 32px;
height: 32px;
border-radius: 100%;
}
.getting-notify .getting-notify-desc{
display: inline-block;
position: relative;
}
.getting-notify-desc:before{
content: "";
width:0;
height:0;
top: 0px;
left: -8px;
position: absolute;
border-top: 8px solid #fff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}
.getting-notify-time,.live-chat-time{
color: #7D7E87;
font-size: 10px;
}
.getting-notify-time i{
font-size: 4px;
}
.notify-box{
margin-top: 35px;
}
.notify-box i{
color: #404040;
}
.notify-box input{
font-size: 14px;
}
.notify-box input:focus{
outline: none;
}

JavaScript code

$('.hide-chat-box').click(function(){
$('.chat-content').slideToggle();
});

don’t Miss : Modal Popup On Page Load Javascript/Jquery Example

I hope you get an idea about chat popup box in jquery demo.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.