<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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>Simple Chat Box</h2> <div class="text-center"> <a href="#" id="addClass"><span class="glyphicon glyphicon-comment"></span> Open chat </a> </div> </div> </div> <div class="popup-box chat-popup" id="qnimate"> <div class="popup-head"> </div> </div>

.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; } .popup-box-on { display: block !important; }

$(function(){ $("#addClass").click(function () { $('#qnimate').addClass('popup-box-on'); }); $("#removeClass").click(function () { $('#qnimate').removeClass('popup-box-on'); }); })