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
Kinjal, Jan 25, 6:20 PM
How are you ?
nice
Are you fine ?Yes always
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.