<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://use.fontawesome.com/f59bcd8580.js"></script> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade" id="my-content" role="tabpanel" aria-labelledby="contact-tab">my content</div> </div> <div class="window-main"> <div class="sub-window-header d-flex justify-content-between"> <div> <div class="font-weight-bold">Praveen Rastogi</div> <div class="online-circle-two"></div> <div class="active-now2">Active Now</div> </div> <div class="close-window-icon"> <i class="fa fa-close"></i> </div> </div> <div class="sub-window-body"> <div class="d-flex message-bar-new"> <div class="message-circle"> <img src="https://bootstraplily.com/demo/message-ui/2397974.png"> </div> <div class="window-message-text"> <span><span class="font-weight-bold">Dheeraj Singh</span> . <span class="text-black-50">11:26 AM</span></span> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sagittis eros, sed fringilla dui. Donec nec nunc non ligula commodo tristique eu eu nibh. Quisque fermentum ante nibh.</p> </div> </div> <div class="d-flex message-bar-new"> <div class="message-circle"> <img src="https://bootstraplily.com/demo/message-ui/awesome-profile-pic-for-girl.jpg"> </div> <div class="window-message-text"> <span><span class="font-weight-bold">Rajeev Ranjan</span> . <span class="text-black-50">11:40 AM</span></span> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sagittis eros, sed fringilla dui. Donec nec nunc non ligula commodo tristique eu eu nibh. Quisque fermentum ante nibh.</p> </div> </div> <div class="d-flex message-bar-new"> <div class="message-circle"> <img src="https://bootstraplily.com/demo/message-ui/2397974.png"> </div> <div class="window-message-text"> <span><span class="font-weight-bold">Dheeraj Singh</span> . <span class="text-black-50">11:26 AM</span></span> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sagittis eros, sed fringilla dui. Donec nec nunc non ligula commodo tristique eu eu nibh. Quisque fermentum ante nibh.</p> </div> </div> <div class="d-flex message-bar-new"> <div class="message-circle"> <img src="https://bootstraplily.com/demo/message-ui/awesome-profile-pic-for-girl.jpg"> </div> <div class="window-message-text"> <span><span class="font-weight-bold">Rajeev Ranjan</span> . <span class="text-black-50">11:40 AM</span></span> <br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sagittis eros, sed fringilla dui. Donec nec nunc non ligula commodo tristique eu eu nibh. Quisque fermentum ante nibh.</p> </div> </div> </div> <div class="sub-window-textarea"> <form> <textarea name="" cols="" rows="" placeholder="Write a message..."></textarea> </form> </div> <div class="message-option"> <div class="d-flex align-items-center justify-content-between bar-bottom-message"> <div class="d-flex"> <div><img src="attach.png"></div> <div></div> <div></div> </div> <div><button class="btn btn-info btn-sm">Send</button></div> </div> </div> </div> <div class="chat-box-new"> <div class="popup-bar d-flex align-items-center" style="background-color:#333; width:250px; color:#fff;"> <div class="profile-circle"> <img src="https://bootstraplily.com/demo/message-ui/awesome-profile-pic-for-girl.jpg"> <div class="online-circle"> </div> </div> <div class="text-white ml-2 bar-text"> Messaging </div> </div> <div class="window-content-wrapper"> <div class="message-search"> <input name="" type="text" placeholder="Search message..."> <img src="img/search.png" class="input_img"> </div> <div class="window-content"> <div class="d-flex justify-content-between align-items-center message-bar-wrapper cc1"> <div class="d-flex"> <div class="message-circle"><img src="https://bootstraplily.com/demo/message-ui/2397974.png"><div class="online-circle"> </div></div> <div class="name-wrapper"><div class="message-name">Rajeev Ranjan</div><div class="designation2">Sr. Consultant</div></div> </div> <div class="new-message-noti"> 2 </div> </div> <div class="d-flex justify-content-between align-items-center message-bar-wrapper"> <div class="d-flex"> <div class="message-circle"><img src="https://bootstraplily.com/demo/message-ui/2397974.png"><div class="online-circle"> </div></div> <div class="name-wrapper"><div class="message-name">Rajeev Ranjan</div><div class="designation2">Sr. Consultant</div></div> </div> <div class="new-message-noti"> 2 </div> </div> <div class="d-flex justify-content-between align-items-center message-bar-wrapper"> <div class="d-flex"> <div class="message-circle"><img src="https://bootstraplily.com/demo/message-ui/2397974.png"><div class="online-circle"> </div></div> <div class="name-wrapper"><div class="message-name">Rajeev Ranjan</div><div class="designation2">Sr. Consultant</div></div> </div> <div class="new-message-noti"> 2 </div> </div> <div class="d-flex justify-content-between align-items-center message-bar-wrapper"> <div class="d-flex"> <div class="message-circle"><img src="https://bootstraplily.com/demo/message-ui/2397974.png"><div class="online-circle"> </div></div> <div class="name-wrapper"><div class="message-name">Rajeev Ranjan</div><div class="designation2">Sr. Consultant</div></div> </div> <div class="new-message-noti"> 2 </div> </div> <div class="d-flex justify-content-between align-items-center message-bar-wrapper"> <div class="d-flex"> <div class="message-circle"><img src="https://bootstraplily.com/demo/message-ui/2397974.png"></div> <div class="name-wrapper"><div class="message-name">Rajeev Ranjan</div><div class="designation2">Sr. Consultant</div></div> </div> </div> <div class="d-flex justify-content-between align-items-center message-bar-wrapper"> <div class="d-flex"> <div class="message-circle"><img src="https://bootstraplily.com/demo/message-ui/2397974.png"></div> <div class="name-wrapper"><div class="message-name">Rajeev Ranjan</div><div class="designation2">Sr. Consultant</div></div> </div> </div> <div class="d-flex justify-content-between align-items-center message-bar-wrapper"> <div class="d-flex"> <div class="message-circle"><img src="https://bootstraplily.com/demo/message-ui/2397974.png"></div> <div class="name-wrapper"><div class="message-name">Rajeev Ranjan</div><div class="designation2">Sr. Consultant</div></div> </div> </div> <div class="d-flex justify-content-between align-items-center message-bar-wrapper"> <div class="d-flex"> <div class="message-circle"><img src="https://bootstraplily.com/demo/message-ui/2397974.png"></div> <div class="name-wrapper"><div class="message-name">Rajeev Ranjan</div><div class="designation2">Sr. Consultant</div></div> </div> </div> <div class="d-flex justify-content-between align-items-center message-bar-wrapper"> <div class="d-flex"> <div class="message-circle"><img src="https://bootstraplily.com/demo/message-ui/2397974.png"></div> <div class="name-wrapper"><div class="message-name">Rajeev Ranjan</div><div class="designation2">Sr. Consultant</div></div> </div> </div> </div> </div> </div> <div class="container text-center small text-muted mt-4 mb-5"> Design by <a href="https://bootstraplily.com/" target="_blank">www.bootstraplily.com</a> </div>

body{ } .window-content-wrapper{ display:none; } .popup-bar{ padding:7px; border-top-left-radius:6px; cursor:pointer; } .profile-circle{ position:relative; } .profile-circle img{ width:30px; height:30px; border-radius:30px; } .bar-text{ opacity:0.7; font-size:14px; font-weight:500; } .online-circle{ width: 8px; height: 8px; background-color: #0F0; position: absolute; right: 0; border-radius: 8px; top: 0; border: 2px solid #fff; } .message-circle{ position:relative; } .message-circle img{ width:33px; height:33px; border-radius:33px; margin-left:9px; } .designation2{ font-size:13px; color:#999; margin-top:-5px; } .name-wrapper{ margin-left:9px; } .message-bar-wrapper{ border-bottom:1px solid #ebebeb; padding-top:5px; padding-bottom:5px; cursor:pointer; transition:all 0.1s ease; } .message-bar-wrapper:hover{ background-color:#f3f3f3; } .message-name{ font-size:14px; font-weight:500; } .window-content{ background-color:#fff; max-height:400px; overflow:auto; } .message-search{ background-color:#FFF; padding:5px; position:relative; } .input_img{ position: absolute; top: 16px; right: 16px; width: 12px; height: 12px; } .message-search input{ border:1px solid #ddd; background-color:#FFF; width:100%; padding:6px; font-size:13px; font-weight:500; } .message-search input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color:#999; font-size:13px; padding-left:5px; } .new-message-noti{ height: 18px; width: 18px; border-radius: 10px; background-color:#09C; color: #FFF; font-size: 12px; text-align: center; font-weight: 600; margin-right:10px; } .window-main{ display:none; width:250px; position:fixed; right:260px; bottom:0; } .sub-window-header{ background-color:#333; color:#fff; padding:7px; border-top-left-radius:6px; border-top-right-radius:6px; } .sub-window-body{ background-color:#fff; max-height:278px; overflow:auto; } .online-circle-two{ width: 8px; height: 8px; background-color: #0F0; border-radius:8px; float:left; margin-top: 4px; margin-right: 5px; } .active-now2{ font-size:12px; } .window-message-text{ margin-left:10px; } .window-message-text p{ font-size:13px; line-height:19px; margin:0; padding:0; } .window-message-text span{ font-size:12px; } .message-bar-new{ padding:5px 0; border-bottom:1px solid #ebebeb; } .sub-window-textarea textarea{ border:1px solid #fff; height:100px; width:100%; padding:10px; outline:none; font-size:14px; } .bar-bottom-message{ padding:7px; background-color:#ddf5f5; } .close-window-icon{ cursor:pointer; } .chat-box-new{ position:fixed; right:0; bottom:0 }

$(document).ready(function(){ $(".popup-bar").click(function(){ $(".window-content-wrapper").toggle(); }); $(".window-content>.cc1").click(function(){ $(".window-main").toggle(); }); $(".close-window-icon").click(function(){ $(".window-main").hide(); }); });