Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"InEtec"
Bootstrap 3.1.0 Snippet by
profrodolfo
3.1.0
jQuery
Preview
HTML
CSS
JS
View Full Screen
Fork
Fork this
1.3K
 
0 Fav
Post to Facebook
Tweet this
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container text-center"> <div class="row"> <h2>Conversar com Amigos</h2> <h4>v3.2</h4> <div class="round hollow text-center"> <a href="#" id="addClass"><span class="glyphicon glyphicon-comment"></span> Abrir Conversas </a> </div> <hr> </div> </div> <div class="popup-box chat-popup" id="qnimate"> <div class="popup-head"> <div class="popup-head-left pull-left"><img src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" alt="iamgurdeeposahan"> Gurdeep Osahan</div> <div class="popup-head-right pull-right"> <div class="btn-group"> <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false"> <i class="glyphicon glyphicon-cog"></i> </button> <ul role="menu" class="dropdown-menu pull-right"> <li><a href="#">Media</a></li> <li><a href="#">Block</a></li> <li><a href="#">Clear Chat</a></li> <li><a href="#">Email Chat</a></li> </ul> </div> <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i></button> </div> </div> <div class="popup-messages"> <div class="direct-chat-messages"> <div class="chat-box-single-line"> <abbr class="timestamp">October 8th, 2015</abbr> </div> <!-- Message. Default to the left --> <div class="direct-chat-msg doted-border"> <div class="direct-chat-info clearfix"> <span class="direct-chat-name pull-left">Osahan</span> </div> <!-- /.direct-chat-info --> <img alt="message user image" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img --> <div class="direct-chat-text"> Hey bro, how’s everything going ? </div> <div class="direct-chat-info clearfix"> <span class="direct-chat-timestamp pull-right">3.36 PM</span> </div> <div class="direct-chat-info clearfix"> <span class="direct-chat-img-reply-small pull-left"> </span> <span class="direct-chat-reply-name">Singh</span> </div> <!-- /.direct-chat-text --> </div> <!-- /.direct-chat-msg --> <div class="chat-box-single-line"> <abbr class="timestamp">October 9th, 2015</abbr> </div> <!-- Message. Default to the left --> <div class="direct-chat-msg doted-border"> <div class="direct-chat-info clearfix"> <span class="direct-chat-name pull-left">Osahan</span> </div> <!-- /.direct-chat-info --> <img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img"><!-- /.direct-chat-img --> <div class="direct-chat-text"> Hey bro, how’s everything going ? </div> <div class="direct-chat-info clearfix"> <span class="direct-chat-timestamp pull-right">3.36 PM</span> </div> <div class="direct-chat-info clearfix"> <img alt="iamgurdeeposahan" src="http://bootsnipp.com/img/avatars/bcf1c0d13e5500875fdd5a7e8ad9752ee16e7462.jpg" class="direct-chat-img big-round"> <span class="direct-chat-reply-name">Singh</span> </div> <!-- /.direct-chat-text --> </div> <!-- /.direct-chat-msg --> </div> </div> <div class="popup-messages-footer"> <textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea> <div class="btn-footer"> <button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button> <button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button> <button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button> <button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button> </div> </div> </div>
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300); @import url(https://fonts.googleapis.com/css?family=Open+Sans); body { font-family: 'Open Sans', sans-serif; } .popup-box { background-color: #ffffff; border: 1px solid #b0b0b0; bottom: 0; display: none; height: 415px; position: fixed; right: 70px; width: 300px; font-family: 'Open Sans', sans-serif; } .round.hollow { margin: 40px 0 0; } .round.hollow a { border: 2px solid #ff6701; border-radius: 35px; color: red; color: #ff6701; font-size: 23px; padding: 10px 21px; text-decoration: none; font-family: 'Open Sans', sans-serif; } .round.hollow a:hover { border: 2px solid #000; border-radius: 35px; color: red; color: #000; font-size: 23px; padding: 10px 21px; text-decoration: none; } .popup-box-on { display: block !important; } .popup-box .popup-head { background-color: #fff; clear: both; color: #7b7b7b; display: inline-table; font-size: 21px; padding: 7px 10px; width: 100%; font-family: Oswald; } .bg_none i { border: 1px solid #ff6701; border-radius: 25px; color: #ff6701; font-size: 17px; height: 33px; line-height: 30px; width: 33px; } .bg_none:hover i { border: 1px solid #000; border-radius: 25px; color: #000; font-size: 17px; height: 33px; line-height: 30px; width: 33px; } .bg_none { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; } .popup-box .popup-head .popup-head-right { margin: 11px 7px 0; } .popup-box .popup-messages { } .popup-head-left img { border: 1px solid #7b7b7b; border-radius: 50%; width: 44px; } .popup-messages-footer > textarea { border-bottom: 1px solid #b2b2b2 !important; height: 34px !important; margin: 7px; padding: 5px !important; border: medium none; width: 95% !important; } .popup-messages-footer { background: #fff none repeat scroll 0 0; bottom: 0; position: absolute; width: 100%; } .popup-messages-footer .btn-footer { overflow: hidden; padding: 2px 5px 10px 6px; width: 100%; } .simple_round { background: #d1d1d1 none repeat scroll 0 0; border-radius: 50%; color: #4b4b4b !important; height: 21px; padding: 0 0 0 1px; width: 21px; } .popup-box .popup-messages { background: #3f9684 none repeat scroll 0 0; height: 275px; overflow: auto; } .direct-chat-messages { overflow: auto; padding: 10px; transform: translate(0px, 0px); } .popup-messages .chat-box-single-line { border-bottom: 1px solid #a4c6b5; height: 12px; margin: 7px 0 20px; position: relative; text-align: center; } .popup-messages abbr.timestamp { background: #3f9684 none repeat scroll 0 0; color: #fff; padding: 0 11px; } .popup-head-right .btn-group { display: inline-flex; margin: 0 8px 0 0; vertical-align: top !important; } .chat-header-button { background: transparent none repeat scroll 0 0; border: 1px solid #636364; border-radius: 50%; font-size: 14px; height: 30px; width: 30px; } .popup-head-right .btn-group .dropdown-menu { border: medium none; min-width: 122px; padding: 0; } .popup-head-right .btn-group .dropdown-menu li a { font-size: 12px; padding: 3px 10px; color: #303030; } .popup-messages abbr.timestamp { background: #3f9684 none repeat scroll 0 0; color: #fff; padding: 0 11px; } .popup-messages .chat-box-single-line { border-bottom: 1px solid #a4c6b5; height: 12px; margin: 7px 0 20px; position: relative; text-align: center; } .popup-messages .direct-chat-messages { height: auto; } .popup-messages .direct-chat-text { background: #dfece7 none repeat scroll 0 0; border: 1px solid #dfece7; border-radius: 2px; color: #1f2121; } .popup-messages .direct-chat-timestamp { color: #fff; opacity: 0.6; } .popup-messages .direct-chat-name { font-size: 15px; font-weight: 600; margin: 0 0 0 49px !important; color: #fff; opacity: 0.9; } .popup-messages .direct-chat-info { display: block; font-size: 12px; margin-bottom: 0; } .popup-messages .big-round { margin: -9px 0 0 !important; } .popup-messages .direct-chat-img { border: 1px solid #fff; background: #3f9684 none repeat scroll 0 0; border-radius: 50%; float: left; height: 40px; margin: -21px 0 0; width: 40px; } .direct-chat-reply-name { color: #fff; font-size: 15px; margin: 0 0 0 10px; opacity: 0.9; } .direct-chat-img-reply-small { border: 1px solid #fff; border-radius: 50%; float: left; height: 20px; margin: 0 8px; width: 20px; background:#3f9684; } .popup-messages .direct-chat-msg { margin-bottom: 10px; position: relative; } .popup-messages .doted-border::after { background: transparent none repeat scroll 0 0 !important; border-right: 2px dotted #fff !important; bottom: 0; content: ""; left: 17px; margin: 0; position: absolute; top: 0; width: 2px; display: inline; z-index: -2; } .popup-messages .direct-chat-msg::after { background: #fff none repeat scroll 0 0; border-right: medium none; bottom: 0; content: ""; left: 17px; margin: 0; position: absolute; top: 0; width: 2px; display: inline; z-index: -2; } .direct-chat-text::after, .direct-chat-text::before { border-color: transparent #dfece7 transparent transparent; } .direct-chat-text::after, .direct-chat-text::before { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: transparent #d2d6de transparent transparent; border-image: none; border-style: solid; border-width: medium; content: " "; height: 0; pointer-events: none; position: absolute; right: 100%; top: 15px; width: 0; } .direct-chat-text::after { border-width: 5px; margin-top: -5px; } .popup-messages .direct-chat-text { background: #dfece7 none repeat scroll 0 0; border: 1px solid #dfece7; border-radius: 2px; color: #1f2121; } .direct-chat-text { background: #d2d6de none repeat scroll 0 0; border: 1px solid #d2d6de; border-radius: 5px; color: #444; margin: 5px 0 0 50px; padding: 5px 10px; position: relative; }
$(function(){ $("#addClass").click(function () { $('#qnimate').addClass('popup-box-on'); }); $("#removeClass").click(function () { $('#qnimate').removeClass('popup-box-on'); }); })
Related:
See More
Template
Material Dashboard Pro
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76