<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 ----------> <div class="container"> <div class="panel panel-default"> <div class="panel-heading text-center"> <div class="row"> <div class="col-md-2"> <div class="icon"><span class="glyphicon glyphicon-chevron-left"></span></div> </div> <div class="col-md-offset-3 col-md-2"> <div id="contact"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div> Tom </div> <div class="col-md-offset-3 col-md-2"> <div class="icon"><span class="glyphicon glyphicon-info-sign"></span></div> </div> </div> </div> <div class="panel-body"> <div class="date"> <span class="bold">Today</span> 11:54 </div> <div class="row"> <div class="message message-in pull-left"> Hey! What's up? </div> </div> <div class="row"> <div class="message message-out pull-right"> Good! And you? </div> </div> <div class="row"> <div class="message message-in pull-left"> Great! </div> </div> <div class="row"> <div class="message message-out pull-right"> Still ok to go to the cinema ? </div> </div> </div> <div class="panel-footer"> <form> <div class="input-group"> <span class="input-group-btn"> <button data-toggle="modal" href="#modal-photo" class="btn btn-default" type="button"><span class="glyphicon glyphicon-camera"></span></button> </span> <input id="message-text" type="text" class="form-control" placeholder="Message"> <span class="input-group-btn"> <button id="envoi" class="btn btn-default" type="button"><span class="glyphicon glyphicon-send"></span></button> </span> </div> </form> </div> </div> <div class="modal" id="modal-photo"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">x</button> <h4 class="modal-title">Envoyer une photo</h4> </div> <div class="modal-body"> <input type="file" name ="photo" id="photo" accept="image/*"> </div> <div class="modal-footer"> <button id="validation" class="btn btn-primary">Envoyer</button> </div> </div> </div> </div> </div>

.panel{ width: 500px; border: 1px #A0A0A0 solid; } .icon{ height: 70px; padding-top:23px; } #contact{ width: 50px; height: 50px; margin:auto; padding:7px 8px 7px 8px; background-color :#A4A4A4; border-radius: 25px 25px 25px 25px; } .glyphicon-info-sign, .glyphicon-chevron-left{ font-size: 25px; color: #37A7FD; } .glyphicon-user{ font-size: 35px; color: #FFFFFF; } .panel-body{ height :350px; overflow-y: scroll; } .date{ color: #A4A4A4; text-align: center; margin-bottom: 5px; } .bold{ font-weight: bold; } .message{ font-size: 1.2em; width: auto; max-width:300px; border-radius: 15px; padding: 10px; margin-bottom: 10px; } .message-in { background-color: #E5E5EA; margin-left: 20px; } .message-out{ background-color : #22D351; margin-right: 20px; color: #FFFFFF; } .glyphicon-send, .glyphicon-camera{ color: #848484; }

$(function() { $('#envoi').on('click', function(){ var message_text = $('#message-text').val(); if(message_text !== ''){ $(".row:last").after('<div class="row"><div class="message message-out pull-right">'+message_text+'</div></div>'); $('#message-text').val(''); } }); $('#validation').on('click', function(){ $("#modal-photo").hide(); var file = photo.files[0]; var reader = new FileReader(); reader.onload = function (e) { $(".row:last").after('<div class="row"><img src="'+e.target.result+'" class="message pull-right" alt="photo"/></div></div>'); } reader.readAsDataURL(file); $('#photo').val(''); }); });