"send mail component"
Bootstrap 3.3.0 Snippet by maherAshori

Post to Facebook Tweet this

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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-3 options">
<div class="well well-sm">
<div class="page-header">
<h4>class options:</h4>
</div>
<ul class="list-group">
<li class="list-group-item">top-left</li>
<li class="list-group-item">top-center</li>
<li class="list-group-item">top-right</li>
<li class="list-group-item">bottom-left</li>
<li class="list-group-item">bottom-center</li>
<li class="list-group-item">bottom-right</li>
<li class="list-group-item">right-middle</li>
<li class="list-group-item">left-middle</li>
</ul>
</div>
</div>
<div class="mail-box top-right">
<i class="fa" onclick="mail(this)"></i>
<form name="form" class="content" novalidate>
<input type="text" class="form-control" placeholder="To">
<hr>
<input type="text" class="form-control" placeholder="Subject">
<textarea rows="7" class="form-control" placeholder="Say Something"></textarea>
<button type="button" class="btn send">Send</button>
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
body {
background-color: #0d95e8;
}
.options {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.mail-box {
background-color: #fff;
position: absolute;
border-radius: 100%;
height: 50px;
width: 50px;
text-align: center;
cursor: pointer;
transition: all 0.50s;
line-height: 55px;
box-shadow: #000 1px 1px 7px 0px;
overflow: hidden;
z-index: 1000;
}
.mail-box.effect {
cursor: default;
opacity: 0.2;
}
.mail-box.active {
cursor: default;
line-height: inherit;
padding: 15px;
width: 300px;
height: 300px;
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
var openMailBox = function (self) {
$(self).addClass("effect");
setTimeout(function () {
$(self).addClass("active");
$(self).removeClass("effect");
setTimeout(function () {
$(self).find(".content").show();
}, 250)
}, 200);
}
var closeMailBox = function (self) {
$(self).find(".content").hide();
$(self).removeClass("active");
setTimeout(function () {
$(self).removeClass("effect");
}, 100);
}
var sendMail = function (self) {
$(self).find(".send").click(function () {
$(self).addClass("sent");
closeMailBox(self);
setTimeout(function () {
$(self).removeClass("sent");
}, 1200)
})
}
var mail = function ($this) {
var self = $($this).closest(".mail-box");
var isActive = $(self).hasClass("active");
if (!isActive) {
openMailBox(self);
sendMail(self);
} else {
closeMailBox(self);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit
E-mail Interface

Questions / Comments: