<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>
</form>
</div>
<div class="mail-box top-center">
<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>
</form>
</div>
<div class="mail-box top-left">
<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>
</form>
</div>
<div class="mail-box bottom-left">
<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>
</form>
</div>
<div class="mail-box bottom-center">
<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>
</form>
</div>
<div class="mail-box bottom-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>
</form>
</div>
<div class="mail-box right-middle">
<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>
</form>
</div>
<div class="mail-box left-middle">
<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>
</form>
</div>
</div>
</div>
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;
border-radius: 5px;
opacity: 1;
}
/*bottom-right*/
.mail-box.bottom-right {
right: 15px;
bottom: 15px;
}
.mail-box.bottom-right.effect {
right: 135px;
bottom: 165px;
}
.mail-box.bottom-right.active {
right: 140px;
bottom: 170px;
}
/*bottom-left*/
.mail-box.bottom-left {
left: 15px;
bottom: 15px;
}
.mail-box.bottom-left.effect {
left: 135px;
bottom: 165px;
}
.mail-box.bottom-left.active {
left: 140px;
bottom: 170px;
}
/*bottom-center*/
.mail-box.bottom-center {
left: 50%;
bottom: 15px;
transform: translate(-50%, 0);
}
.mail-box.bottom-center.effect {
left: 50%;
bottom: 165px;
transform: translate(-50%, 0);
}
.mail-box.bottom-center.active {
left: 50%;
bottom: 170px;
transform: translate(-50%, 0);
}
/*top-left*/
.mail-box.top-left {
left: 15px;
top: 15px;
}
.mail-box.top-left.effect {
left: 135px;
top: 165px;
}
.mail-box.top-left.active {
left: 140px;
top: 170px;
}
/*top-right*/
.mail-box.top-right {
right: 15px;
top: 15px;
}
.mail-box.top-right.effect {
right: 135px;
top: 165px;
}
.mail-box.top-right.active {
right: 140px;
top: 170px;
}
/*top-center*/
.mail-box.top-center {
left: 50%;
top: 15px;
transform: translate(-50%, 0);
}
.mail-box.top-center.effect {
left: 50%;
top: 165px;
transform: translate(-50%, 0);
}
.mail-box.top-center.active {
left: 50%;
top: 170px;
transform: translate(-50%, 0);
}
/*right-middle*/
.mail-box.right-middle {
right: 15px;
top: 50%;
transform: translate(0, -50%)
}
.mail-box.right-middle.effect {
right: 100px;
top: 50%;
transform: translate(0, -50%)
}
.mail-box.right-middle.active {
right: 150px;
top: 50%;
transform: translate(0, -50%)
}
/*left-middle*/
.mail-box.left-middle {
left: 15px;
top: 50%;
transform: translate(0, -50%)
}
.mail-box.left-middle.effect {
left: 100px;
top: 50%;
transform: translate(0, -50%)
}
.mail-box.left-middle.active {
left: 150px;
top: 50%;
transform: translate(0, -50%)
}
.mail-box.sent {
background-color: #40c38d !important;
line-height: 60px;
}
.mail-box.sent i:before {
content: "\f00c";
color: #fff;
font-size: x-large;
}
.mail-box i:before {
content: "\f0e0";
color: #888;
font-size: x-large;
}
.mail-box.active i {
cursor: pointer;
position: absolute;
right: 15px;
z-index: 10;
}
.mail-box.active i:before {
content: "\f00d";
}
.mail-box.active .content {
text-align: left;
color: #888;
position: relative;
height: 100%;
overflow: hidden;
}
.mail-box.active .content input.form-control, .mail-box.active .content textarea.form-control {
color: #888;
border: none;
resize: none;
outline: none;
font-family: inherit;
font-size: medium;
box-shadow: none;
margin: 0;
}
.mail-box.active .content hr {
margin: 5px 0;
}
.mail-box.active .content .send {
position: absolute;
bottom: 0;
}
.mail-box.active .content .send.btn-link {
color: #888;
}
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);
}
}
