Bootstrap 3.3.0 Snippet by cppleon

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!DOCTYPE html> <html> <head> <title>Chat Box</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="chatbox.css"> </head> <body> <div class="chatbox chatbox--tray chatbox--empty"> <div class="chatbox__title"> <h5><a href="#">Customer Service</a></h5> <button class="chatbox__title__tray"> <span></span> </button> <button class="chatbox__title__close"> <span> <svg viewBox="0 0 12 12" width="12px" height="12px"> <line stroke="#FFFFFF" x1="11.75" y1="0.25" x2="0.25" y2="11.75"></line> <line stroke="#FFFFFF" x1="11.75" y1="11.75" x2="0.25" y2="0.25"></line> </svg> </span> </button> </div> <div class="chatbox__body"> <div class="chatbox__body__message chatbox__body__message--left"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Picture"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="chatbox__body__message chatbox__body__message--right"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/arashmil/128.jpg" alt="Picture"> <p>Nulla vel turpis vulputate, tincidunt lectus sed, porta arcu.</p> </div> <div class="chatbox__body__message chatbox__body__message--left"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Picture"> <p>Curabitur consequat nisl suscipit odio porta, ornare blandit ante maximus.</p> </div> <div class="chatbox__body__message chatbox__body__message--right"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/arashmil/128.jpg" alt="Picture"> <p>Cras dui massa, placerat vel sapien sed, fringilla molestie justo.</p> </div> <div class="chatbox__body__message chatbox__body__message--right"> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/arashmil/128.jpg" alt="Picture"> <p>Praesent a gravida urna. Mauris eleifend, tellus ac fringilla imperdiet, odio dolor sodales libero, vel mattis elit mauris id erat. Phasellus leo nisi, convallis in euismod at, consectetur commodo urna.</p> </div> </div> <form class="chatbox__credentials"> <div class="form-group"> <label for="inputName">Name:</label> <input type="text" class="form-control" id="inputName" required> </div> <div class="form-group"> <label for="inputEmail">Email:</label> <input type="email" class="form-control" id="inputEmail" required> </div> <button type="submit" class="btn btn-success btn-block">Enter Chat</button> </form> <textarea class="chatbox__message" placeholder="Write something interesting"></textarea> </div> </body> </html>
.chatbox { position: fixed; bottom: 0; right: 30px; width: 300px; height: 400px; background-color: #fff; font-family: 'Lato', sans-serif; -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } .chatbox--tray { bottom: -350px; } .chatbox--closed { bottom: -400px; } .chatbox .form-control:focus { border-color: #1f2836; } .chatbox__title, .chatbox__body { border-bottom: none; } .chatbox__title { min-height: 50px; padding-right: 10px; background-color: #1f2836; border-top-left-radius: 4px; border-top-right-radius: 4px; cursor: pointer; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .chatbox__title h5 { height: 50px; margin: 0 0 0 15px; line-height: 50px; position: relative; padding-left: 20px; -webkit-flex-grow: 1; flex-grow: 1; } .chatbox__title h5 a { color: #fff; max-width: 195px; display: inline-block; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chatbox__title h5:before { content: ''; display: block; position: absolute; top: 50%; left: 0; width: 12px; height: 12px; background: #4CAF50; border-radius: 6px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .chatbox__title__tray, .chatbox__title__close { width: 24px; height: 24px; outline: 0; border: none; background-color: transparent; opacity: 0.5; cursor: pointer; -webkit-transition: opacity 200ms; transition: opacity 200ms; } .chatbox__title__tray:hover, .chatbox__title__close:hover { opacity: 1; } .chatbox__title__tray span { width: 12px; height: 12px; display: inline-block; border-bottom: 2px solid #fff } .chatbox__title__close svg { vertical-align: middle; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.2px; } .chatbox__body, .chatbox__credentials { padding: 15px; border-top: 0; background-color: #f5f5f5; border-left: 1px solid #ddd; border-right: 1px solid #ddd; -webkit-flex-grow: 1; flex-grow: 1; } .chatbox__credentials { display: none; } .chatbox__credentials .form-control { -webkit-box-shadow: none; box-shadow: none; } .chatbox__body { overflow-y: auto; } .chatbox__body__message { position: relative; } .chatbox__body__message p { padding: 15px; border-radius: 4px; font-size: 14px; background-color: #fff; -webkit-box-shadow: 1px 1px rgba(100, 100, 100, 0.1); box-shadow: 1px 1px rgba(100, 100, 100, 0.1); } .chatbox__body__message img { width: 40px; height: 40px; border-radius: 4px; border: 2px solid #fcfcfc; position: absolute; top: 15px; } .chatbox__body__message--left p { margin-left: 15px; padding-left: 30px; text-align: left; } .chatbox__body__message--left img { left: -5px; } .chatbox__body__message--right p { margin-right: 15px; padding-right: 30px; text-align: right; } .chatbox__body__message--right img { right: -5px; } .chatbox__message { padding: 15px; min-height: 50px; outline: 0; resize: none; border: none; font-size: 12px; border: 1px solid #ddd; border-bottom: none; background-color: #fefefe; } .chatbox--empty { height: 262px; } .chatbox--empty.chatbox--tray { bottom: -212px; } .chatbox--empty.chatbox--closed { bottom: -262px; } .chatbox--empty .chatbox__body, .chatbox--empty .chatbox__message { display: none; } .chatbox--empty .chatbox__credentials { display: block; }
(function($) { $(document).ready(function() { var $chatbox = $('.chatbox'), $chatboxTitle = $('.chatbox__title'), $chatboxTitleClose = $('.chatbox__title__close'), $chatboxCredentials = $('.chatbox__credentials'); $chatboxTitle.on('click', function() { $chatbox.toggleClass('chatbox--tray'); }); $chatboxTitleClose.on('click', function(e) { e.stopPropagation(); $chatbox.addClass('chatbox--closed'); }); $chatbox.on('transitionend', function() { if ($chatbox.hasClass('chatbox--closed')) $chatbox.remove(); }); $chatboxCredentials.on('submit', function(e) { e.preventDefault(); $chatbox.removeClass('chatbox--empty'); }); }); })(jQuery);

Related: See More

Questions / Comments:

this is soooo baaaddddddd

anriksl (0) - 6 years ago - Reply 0

Hi, how to make it not scroll to top after u click maximize/minimize?

Angah () - 7 years ago - Reply 0

I'm not seeing that behavior. Seems to work fine.

skyhighpn (-1) - 6 years ago - Reply 0