2
$(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 не появляется по какой-то причине, хотя в стилях прописано. введите сюда описание изображения В чем может быть проблема?

2 ответа 2

3

Вы не указали свойство content: '' у after.

3

для псевдо элементов типа : after и :before обязательно наличие content:"";

&:after {
    position: fixed;
    z-index: 2;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

т.е в вашем случае должно быть так :

&:after {
    content:"";
    position: fixed;
    z-index: 2;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.