помогите пожалуйста разобраться в коде. суть в том чтобы после заполнении формы вышло модальное окно с благодарностью. если в PHP есть div.status - после отправки формы на почту - показывается окно но без css стилей. а если убрать div.status с корня PHP и поместить в index.html - после отправки данных показывается пустая страница. (перезагружая страницу форма отправляется повторно). как добиться успеха чтоб модальное окно высвечивалось как нужно со стилями? Благодарю за внимание.
P.S.: Не судите строго новичка ;) прилагаю сайт и окно как должно выглядеть.
index.html
<section class="overlay">
<div class="overlay__modal" id="consultation">
<div class="overlay__close"> × </div>
<div class="overlay__header"> Просто заполните форму заявки</div>
<div class="overlay__subheader">и мы перезвоним вам в течении 10 минут</div>
<form class="feed-forms feed-forms_overlay " action="sender.php" method="post">
<input name="name" placeholder="Ваше имя" type="text" >
<input name="phone" placeholder="Ваш телефон" >
<input name="email" placeholder="Ваш E-mail" type="email" >
<button class="button_main">заказать кОНСУЛЬТАЦИЮ</button>
</form>
</div>
<div class="status overlay__modal overlay__modal_thanks " id="thanks">
<div class="overlay__close"> × </div>
<div class="overlay__header">Спасибо за вашу заявку!</div>
<div class="overlay__subheader">Наш менеджер свяжется с вами в ближайшее время!</div>
</div>
PHP
<?php
$name = $_POST['name'];
$surname = $_POST['surname'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$text = $_POST['text'];
$to = "kate.pidoni@gmail.com";
$date = date ("d.m.Y");
$time = date ("h:i");
$from = $email;
$subject = "Заявка c сайта";
$msg="
Имя: $name /n
Фамилия: $surname /n
Телефон: $phone /n
Почта: $email /n
Текст: $text";
mail($to, $subject, $msg, "From: $to ");
?>
<div class="status overlay__modal overlay__modal_thanks " id="thanks">
<div class="overlay__close"> × </div>
<div class="overlay__header">Спасибо за вашу заявку!</div>
<div class="overlay__subheader">Наш менеджер свяжется с вами в ближайшее время!</div>
</div>
JS
jQuery('.button_main').click( function() {
var form = jQuery(this).closest('form');
if ( form.valid() ) {
var actUrl = form.attr('action');
jQuery.ajax({
url: actUrl,
type: 'post',
dataType: 'html',
data: form.serialize(),
success: function(data) {
$('#thanks').modal('show'); // для бутстрапа
},
error: function() {
form.find('.status').html('серверная ошибка');
}
});
}
});
SCSS
.overlay {
display: none;
position: fixed;
width: 100%;
min-height: 100%;
top: 0;
background-color: rgba(0, 0, 0, 0.56);
&__modal {
padding-bottom: 15px;
position: absolute;
width: 382px;
min-height: 402px;
background: #F2F2F2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&_thanks {
min-height: 143px;
.overlay__subheader {
width: 243px;
margin: 0 auto;
margin-top: 10px;
}
}
}
.error {
border: 1px solid red;
margin-bottom: 7px;
text-align: center;
}
label.error {
border: none;
}
&__close {
position: absolute;
top: 0;
left: 400px;
font-size: 41px;
line-height: 15px;
color: $main-color;
cursor: pointer;
}
&__header {
margin-top: 32px;
font-weight: 700;
font-size: 19px;
text-align: center;
}
&__subheader {
margin-bottom: 26px;
margin-top: 10px;
font-weight: 700;
font-size: 14px;
text-align: center;
}
}
#consultation , #order , #thanks {
display: none;
}