"Like iPhone Message"
Bootstrap 3.3.0 Snippet by MikaCorp

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

Related: See More


Questions / Comments:

thanks!

chayo777 () - 7 years ago - Reply 0