"send mail component"
Bootstrap 3.3.0 Snippet by maherAshori

<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); } }

Related: See More


Questions / Comments: