JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<a href="#feedback" rel="nofollow" class="a-psevdo modalbox">Письмо продавцу</a>
<div class="popup_letter" id="feedback">
<form method="post">
<div class="name-application tit">Письмо продавцу</div>
<div class="content-application">
<label class="label left">Имя</label>
<div class="b-input right">
<input class="input" type="text" name="name"/>
</div>
<div class="clear"></div>
</div>
<div class="content-application">
<label class="label left">Эл. почта</label>
<div class="b-input right">
<input class="input" name="mail" type="text"/>
</div>
<div class="clear"></div>
</div>
<div class="content-application">
<label class="label left">Сообщение</label>
<div class="b-input right">
<textarea class="input" type="text" rows="8" name="sms"></textarea>
</div>
<div class="clear"></div>
</div>
<div class="b-button-application">
<button class="button-application" type="submit">Отправить</button>
</div>
</form>
</div>
CSS
.popup_letter{
display: none;
}
JavaScript
$(document).ready(function(){
$(".modalbox").fancybox({
'padding' : 0,
'scrolling' : 'no',
'autoScale' : 'true',
minWidth : 300
});
$("#f_contact").submit(function(){ return false; });
$("#f_send").on("click", function(){
// тут дальнейшие действия по обработке формы
// закрываем окно
$("#f_contact").fadeOut("fast", function(){
$(this).before("<p><strong>Ваше сообщение отправлено!</strong></p>");
setTimeout("$.fancybox.close()", 1000);
});
});
});