Hộp popup gửi email sử dụng tiện ích liên hệ của blog

Hộp popup gửi email sử dụng tiện ích liên hệ của blog


#B1: Thêm tiện ích biểu mẫu liên hệ và làm ẩn nó đi

#B2: Thêm css

.subcribe-content {width: auto;padding: 1em 0}
.blanterinput{float:none;position:relative;margin-bottom:45px;margin-right:10px}
.blanterinput input,.blanterinput textarea{font-size:16px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}
.blanterinput input:focus,.blanterinput textarea:focus{outline:0}.blanterinput label{color:#999;font-size:16px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}
.bar{position:relative;display:block;width:100%}.bar:after,.bar:before{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}
.bar:before{left:50%}
.bar:after{right:50%}
.blanterinput input:focus~.bar:after,.blanterinput input:focus~.bar:before,.blanterinput textarea:focus~.bar:after,.blanterinput textarea:focus~.bar:before{width:50%}
.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}
.blanterinput input:focus~.highlight,.blanterinput textarea:focus~.highlight{animation:inputHighlighter .3s ease}
.blanterinput input:focus~label,.blanterinput input:valid~label,.blanterinput textarea:focus~label,.blanterinput textarea:valid~label{top:-20px;font-size:14px;color:#07ACEC}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit,.buttonBlue{color:#fff!important;background:#07ACEC;padding:7px 20px;border-radius:4px;border:none;outline:0;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left}
input#ContactForm1_contact-form-submit:hover,.buttonBlue:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}
#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
.img-replace{display: inline-block;overflow: hidden;text-indent: 100%;color: transparent;white-space: nowrap}
.btn-nugget-info{text-align: center;position: absolute;width: 100%;height: 50px;line-height: 50px;bottom: 0;left: 0}
.btn-nugget-info a{position: relative;font-size: 14px;color: #5e6e8d;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s}
.no-touch .btn-nugget-info a:hover{opacity: .8;}
.btn-nugget-info span {vertical-align: middle;display: inline-block}
.btn-nugget-info span svg{display: block;}
.btn-nugget-info .btn-nugget-info-arrow{fill: #5e6e8d}
.btn-popup{position: fixed;z-index: 10;left: 0;top: 0;height: 100%;width: 100%;background-color: rgba(94, 110, 141, 0.9);opacity: 0;visibility: hidden;-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;transition: opacity 0.3s 0s, visibility 0s 0.3s}
.btn-popup.is-visible{opacity: 1;visibility: visible;-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;-moz-transition: opacity 0.3s 0s, visibility 0s 0s;transition: opacity 0.3s 0s, visibility 0s 0s;}
.btn-popup-container {position: relative;width: auto;max-width: 500px;height: 480px;margin: 4em auto;background: #fff;text-align: left;padding: 0 20px}
.btn-popup-container h2 {font-size: 18px;text-transform: uppercase;text-align: center;padding-top: 15px}
.btn-popup-container .btn-popup-close {position: absolute;top: 8px;right: 8px;width: 30px;height: 30px;}
.btn-popup-container .btn-popup-close::before, .btn-popup-container .btn-popup-close::after {content: '';position: absolute;top: 12px;width: 14px;height: 2px;background-color: #333}
.btn-popup-container .btn-popup-close::before {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);left: 8px}
.btn-popup-container .btn-popup-close::after{-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);right: 8px;}
.is-visible .btn-popup-container{-webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);-o-transform: translateY(0);transform: translateY(0);}

#B3: Đặt nút gửi email

<a class='email-popup' href='javascript:void(0);'>Gửi email</a>
<div class='btn-popup' role='alert'>
<div class='btn-popup-container'>
<h2>gửi email cho tác giả</h2><br/><br/>
<form name='contact-form'>
<div class='blanterinput'>
<input class='validate' id='ContactForm1_contact-form-name' name='name' required='' type='text' value=''/> <span class='highlight'/> <span class='bar'/>
<label><i class='fa fa-user'/>&amp;nbsp;&amp;nbsp;Họ tên</label>
</div>
<div class='blanterinput'>
<input class='validate' id='ContactForm1_contact-form-email' name='email' required='' type='email' value=''/> <span class='highlight'/> <span class='bar'/>
<label><i class='fa fa-envelope'/>&amp;nbsp;&amp;nbsp;Email của bạn</label>
</div>
<div class='blanterinput'>
<textarea class='validate' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' required='' rows='5'/> <span class='highlight'/> <span class='bar'/>
<label><i class='fa fa-microphone'/>&amp;nbsp;&amp;nbsp;Nội dung</label>
</div>
<input id='ContactForm1_contact-form-submit' type='button' value='Gửi email'/>
<div id='ContactForm1_contact-form-error-message'> </div>
<div id='ContactForm1_contact-form-success-message'> </div>
</form>
<a class='btn-popup-close img-replace' href='javascript:void(0);'/> 
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(e){e(".email-popup").on("click",function(p){p.preventDefault(),e(".btn-popup").addClass("is-visible")}),e(".btn-popup").on("click",function(p){(e(p.target).is(".btn-popup-close")||e(p.target).is(".btn-popup"))&&(p.preventDefault(),e(this).removeClass("is-visible"))}),e(document).keyup(function(p){"27"==p.which&&e(".btn-popup").removeClass("is-visible")})});
//]]>
</script>

 

 

chúc các bạn thành công

 

nguồn anh Tuấn

Tags:

Đọc nhiều tuần qua:

One thought on “Hộp popup gửi email sử dụng tiện ích liên hệ của blog

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *