Bootstrap Snippet Like iPhone Message using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(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('');
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Like iPhone Message"
Bootstrap 3.3.0 Snippet by MikaCorp

Related: See More

Questions / Comments:

"Like iPhone Message" Bootstrap 3.3.0 Snippet by MikaCorp

Related: See More

Questions / Comments:

"Like iPhone Message"
Bootstrap 3.3.0 Snippet by MikaCorp