https://github.com/kmaroff/uniMail Работает в связке с фэнсибокс. В примере версия 2.
#contact-popup .success-form {
display: none;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
width: 100%;
height: 100%;
text-align: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-transform: uppercase;
color: #000;
font-weight: 700;
}
#contact-popup .success-form.visible {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
$("#contact-popup").submit(function() { //Change
var th = $(this);
$.ajax({
type: "POST",
url: "/mail.php", //Change
data: th.serialize()
}).done(function() {
$(".success-form").addClass("visible"),
setTimeout(function() {
th.trigger("reset");
$(".success-form").removeClass("visible"),
$.fancybox.close();
}, 3500);
});
return false;
});
$(document).ready(function() {
$(".order-button").fancybox({
fitToView : true,
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
<button type="submit" class="order-button" href="#hidden-content">Заказать</button>
<div style="display: none;" id="hidden-content">
<div class="contact-form houses-form">
<form id="contact-popup" method="post">
<div class="success-form">
Спасибо за заявку!<br>
Мы свяжемся с вами в ближайшее время.
</div>
<h3>Форма заявки</h3>
<input type="hidden" name="project_name" value="Имя отправителя">
<input type="hidden" name="admin_email" value="Почта">
<input type="hidden" name="form_subject" value="Тема письма">
<input type="text" name="Имя" placeholder="Ваше имя"><br>
<input type="text" name="Почта/Телефон" placeholder="Почта/Телефон" required><br>
<textarea rows="3" name="Сообщение" placeholder="Ваш вопрос"></textarea><br>
<input type="hidden" name="Откуда" value="Метка">
<button name="submit" type="submit" id="contact-submit" class="order-button-popup">Отправить</button>
</form>
</div>
</div>