$(document).ready(function () {
$('#sendApp').click(function () {
var mail=$('.mail').val(), ms=$('.ms').val();
if (!mail.match(/^[-._a-z0-9]+@(?:[a-z0-9][-a-z0-9]+\.)+[a-z]{2,6}$/)) {
alert('Введите корректный email');
return false;
}
else if(ms.length<5){
alert('Длинна текста должна быть более 5 символов');
return false;
}
else {
$.post(
"/send_t.php", {
ms:ms,
mail:mail,
name:$('.name').val()
}, res
);
}
});
function res(data) {
console.log(data);
if(data==='+'){
$('body').append('<div class="modal_wrapper"><div class="modal_accept"><img src="img/accept.png" id="accept" alt="Отправлено" /><p>заявка успешно отправлена спасибо!</p><a href="#close_mod"><img src="img/close.png" alt="Закрыть" /></a></div></div>')
}
else alert("Что-то пошло не так")
}
});
Скрипт создает элемент, модальное окно,
Вывод работает. Окну прописаны такие стили:
.modal_wrapper {
&:after {
position: fixed;
z-index: 2;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal_accept {
position: fixed;
width: 480px;
height: 192px;
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.25);
top: 35%;
left: 50%;
transform: translateX(-50%);
background-color: white;
z-index: 4;
#accept {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
}
p {
font-size: 20px;
text-transform: uppercase;
font-family: 'Roboto Slab', serif;
display: block;
width: 72.92%;
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
font-weight: 700;
text-align: center;
}
a {
position: absolute;
right: 14px;
top: 14px;
}
}
}
Но элемент :after не появляется по какой-то причине, хотя в стилях прописано. В чем может быть проблема?