Здравствуйте. Пытаюсь создать всплывающую по клику контактную форму. Везде засилие создание таких форм с помощью плагинов, прям каждому блогеру нужно описать, как создать форму через плагин. Подскажите, где можно посмотреть, как сделать?
От формы нужно:
- чтобы она всплывала при клике на что-то;
- затемняла фон;
- при нажатии на "отправить" выводила "отправлено", либо "ошибка" и закрывалась по нажатию на крестик сообщения
В идеале, хочу сделать как
здесь (кнопка "Записаться"), но там реализовано на cms ucoz, через встроенную почтовую форму. Сейчас сделал такую штуку
<a href="javascript:void(0)" onclick="document.getElementById('parent_popup_click').style.display='block';">Текст ссылки</a>
<div id="parent_popup_click">
<div id="popup_click">
<form method="post" action="javascript:void(0);" onsubmit="send_form();" id="forma">
<input type="text" name="fio" placeholder="Ф.И.О" />
<input type="text" name="phone" placeholder="Телефон" />
<input type="text" name="email" placeholder="E-Mail" />
<input type="text" name="adres" placeholder="Адрес доставки" />
<br/>
<input type="submit" value="отправить" />
</form>
<a class="close" title="Закрыть" onclick="document.getElementById('parent_popup_click').style.display='none';">X</a>
</div>
в head
<script>
function send_form() {
var msg = $("#forma").serialize();
$.ajax({
type: "POST",
url: "/send.php",
data: msg,
success: function(data) {
alert("Сообщение отправлено");
setTimeout(function () {
$(".feedback_form_bg").fadeOut();}, 1000);
},
error: function(xhr, str){
alert("Возникла ошибка!");
setTimeout(function () {$(".feedback_form_bg").fadeOut();}, 1000);
}
});
}
</script>
css
/* Всплывающее окно */
#parent_popup, #parent_popup_click {
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup, #popup_click {
background: #fff;
max-width: 600px;
width:70%;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
/*--CSS3 CSS3 Тени для Блока--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Закругленные углы--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#popup h2, #popup_click h2 {
font:28px Monotype Corsiva, Arial;
font-weight: bold;
text-align: center;
color: #008000;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#popup h3, #popup_click h3 {
font:24px Monotype Corsiva, Arial;
color: #008000;
text-align: left;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
/* кнопка закрытия */
.close {
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #ccc;
height: 24px;
line-height: 24px;
position: absolute;
right: -24px;
cursor: pointer;
text-align: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
font-family: helvetica, arial;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
top: -24px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color: rgba(255, 69, 0, 0.8);
}
#popup_click {
background: #fff;
max-width: 400px;}
как это работает можно посмотреть
тут (где "тест формы начат"), либо на
кодепене 
