0

помогите пожалуйста разобраться в коде. суть в том чтобы после заполнении формы вышло модальное окно с благодарностью. если в PHP есть div.status - после отправки формы на почту - показывается окно но без css стилей. а если убрать div.status с корня PHP и поместить в index.html - после отправки данных показывается пустая страница. (перезагружая страницу форма отправляется повторно). как добиться успеха чтоб модальное окно высвечивалось как нужно со стилями? Благодарю за внимание.

P.S.: Не судите строго новичка ;) прилагаю сайт и окно как должно выглядеть.

http://kate-sites.com/

как должно выглядеть окно

index.html

    <section class="overlay">
        <div class="overlay__modal" id="consultation">
            <div class="overlay__close"> &times; </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"> &times; </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"> &times; </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;
}

1 ответ 1

0

Необходимо в файл, где находятся все стили, добавить стили для модального окна, к ним относятся: status overlay__modal overlay__modal_thanks и все классы ниже.

4
  • Выше добавила SCSS код так же. все ровно не работают стили с всплывающим окном.
    – Kate Blbn
    7 мар в 9:27
  • SCSS - это препроцесор. Он должен быть сгенерирован в CSS, после чего подключен к общему файлу. Для преобразования можете воспользоваться онлайн генераторами. cssportal.com/scss-to-css 7 мар в 9:54
  • все это сделано ;) но всеровно проблема осталась..
    – Kate Blbn
    8 мар в 10:22
  • значит у вас как-то не так назначены стили, по тому и не применились. Скорее всего напутали с каскадностью. Перепроверте совпадение ваших названий классов с тем что вы задаете в CSS 9 мар в 9:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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