1

Есть рабочий код, который показывает попап 2 раза с разницей в три минуты, и есть задача - модернизировать этот код: 1 вариант) Надо показывать попап только новым посетителям, то есть если человек видел попап эти два раза, а потом обновил страницу и попа больше не выскакивал. 2 вариант) Если посетитель заполнил форму в попапе и отправил, то он больше никогда не увидит попап. Помогите, пожалуйста, реализовать. Вот код:

    var lastPop = 0;
var count = 0;

$(document).on('mouseleave', popup);

function popup(e){
  var now = new Date().getTime();
  var left_3min = 10000 < ( now - lastPop );

  console.log(now - lastPop);

  if (e.clientY < 0 && left_3min) {
    $("#staypopup").addClass("show");
    lastPop = now;

    if( ++count == 2 )
      $(document).off('mouseleave', popup);
  }
}

Код HTML

<div id="staypopup" class="popup-rewiew">
  <div class="popup-rewiew__container">
    <div class="close">
      <div class="close-element"><a id="staypopup-close" class="btn-close">x</a>
      </div>
    </div>
    <div class="staypopup-title">Получите фотокаталог!</div>
    <div>Полный каталог продукции Docke с рекомендациями специалистов завода и подбором
      цветовой гаммы материалов</div>
    <div class="staypopup-desc">Куда отправить фотокатолог?</div>
    <form method="POST" id="form_stay" class="reiew_form"
      action="javascript:void(null);" onsubmit="sendstay()">
      <div class="inner-adress">
        <input id="E-mail" type="radio" name="checkbox" value="E-mail">
        <label for="E-mail"><nobr>E-mail</nobr></label>
        <input id="WhatsApp" type="radio" name="checkbox" value="WhatsApp">
        <label for="WhatsApp">WhatsApp</label>
        <input id="Telegram" type="radio" name="checkbox" value="Telegram">
        <label for="Telegram">Telegram</label>
        <input id="Viber" type="radio" name="checkbox" value="Viber"><label
          for="Viber">Viber</label></div>
      <input id="contact_phone" name="contact_phone" class="mask-bar" type="text"
        placeholder="Ваш номер" required> 
      <input id="contact_email" name="contact_email"
        type="text" placeholder="Ваш e-mail" required>
      <input class="button-review" type="submit" value="Отправить">
    </form>
    <div class="staypopup-img"><img src="assets/img/catalog-img-popup.png" alt="">
    </div>
    <div class="results main-data-inf"> </div>
  </div>
</div>
8
  • предпочтителен второй вариант 3 мар 2020 в 15:46
  • Увидел 2 раза попап - записали в куки, если кук есть - не показываете, если заполнил - записали в куки и т.д.
    – meine
    3 мар 2020 в 15:47
  • @Алёна Чащина Вы хотите сделать либо либо? Или оба варианта?
    – Denis640Kb
    3 мар 2020 в 15:47
  • Вариант один, и предпочтительно второй. 3 мар 2020 в 15:56
  • Увидел 2 раза попап - записали в куки, если кук есть - не показываете, если заполнил - записали в куки и т.д. - такой вариант устраивает, но вот как это правильно записать, к сожалению не знаю( 3 мар 2020 в 15:59

1 ответ 1

1

Позволил себе немного изменить Ваш код.
1. Для проверки данных и времени открытия popup лучше использовать localstorage. В это случае, при очистке его popup снова будет показываться в соответствии с правилами, но не будет проблем, если человек уже заполнял форму и она снова не появится.
2. Добавил в скрипт оба варианта реализации:
a) После двух показов он срывается навсегда.
b) После заполнения формы он скрывается навсегда.
3. В форме у Вас был вызов функции sendstay(), которая не была указана в Вашем примере js, чтобы проверять наличие выбранного radio перенёс вызов данной функции в нажатие кнопки.
4. Добавил проверку - если popup уже открыт, а мышка выходит за пределы, то ничего не делать, а для теста - выводить в консоль сообщение.
5. Так же добавил функцию закрытия popup она так же отсутствовала в примере. И старался Ваши данные уже записанные на jquery не трогать, чтобы осталось понимание.
Остальное по мелочи. Постарался добавить больше комментариев в код для понимания.
В Snippetе localStorage не работает, по этому для теста необходимо скопировать себе.

    $(document).on('mouseleave', popup);

    function callPop(pop) { // Вспомогательная функция записи в localstorage
        var now1 = new Date().getTime(); // Получает текущую дату
        $("#staypopup").addClass("show"); // Делаем popup видимым
        localStorage.setItem('popup', now1); // записываем время открытия popup
        localStorage.setItem('pop', +pop+1); // записываем триггер (это для отсчёта больше двух открытий) к предыдущему плюсуем один
    }
    function popup() { // Основная функция
        if (document.getElementById('staypopup').classList.contains('show')) { // Если popup содержит класс show, то выводим в консоль сообщение (Это для теста) Хотите убрать - замените проверку на !
            console.log('popup уже открыт');
        } else { // Если popup закрыт
            var now = new Date().getTime(); // Получаем текущее время
            var left_3min = 180; // 180 секунд это 3 минуты
            var popTime = localStorage.getItem('popup'); // Получаем данные из localstorage времени
            let pop = 0; // Проставляем триггер pop
            pop = localStorage.getItem('pop'); // Если уже есть запись в localstorage, то перезаписываем pop, если нет, то нет.
            if (pop < 2) { // Если значение pop меньше двух (Меньше двух открытий popup, то выполняем действие
                if (popTime) { // Если не пустое, то проверяем.
                    var dif = Math.round((now - popTime) / 1000); // Получаем секунды для сравнения
                    if (dif > left_3min) { // Если разница полученного времени больше промежутка указанного, то выполняем.
                        callPop(pop); // Функцию открытия popup и записи в localstorage
                    }
                } else { // Если значения popTime нет, то выполняем
                    callPop(pop); // Функцию открытия popup и записи в localstorage
                }
            }
        }
    }
    let fillForm = document.getElementsByClassName('button-review'); // Получаем кнопку с классом
    fillForm[0].onclick = function(){ // Если кнопка нажата, то... (Стоит индекс [0] для демонстрации, при необходимости изменить.
        function getChRadio(name) { // Функция проверки выбранного radio
            let elements = document.getElementsByName(name); // Получаем элементы с именем
            for (let i=0, len=elements.length; i<len; ++i) // Перебираем элементы
                if (elements[i].checked) return elements[i].value; // Возвращаем из функции значение, которое выбрано.
        }
        //sendstay(); // Перенёс вызов Вашей функции сюда.
        let bz = getChRadio('checkbox'); // Проверяем не пустое ли поле radio получаем выбранное для проверки.
        if (bz){ // Если не пустое, то...
            localStorage.setItem('pop', 100); // Записываем в localstorage значение, чтобы больше не открывался
            $("#staypopup").removeClass("show"); // Скрываем popup
        }
    };
    let close = document.getElementById('staypopup-close'); // Получаем кнопку по id
    close.onclick = function () { // Отслеживаем нажатие
        $("#staypopup").removeClass("show"); // Скрываем popup
    }
    .popup-rewiew {
        display: none;
    }
    .show {
        display: block;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="staypopup" class="popup-rewiew">
    <div class="popup-rewiew__container">
        <div class="close">
            <div class="close-element"><a id="staypopup-close" class="btn-close">x</a>
            </div>
        </div>
        <div class="staypopup-title">Получите фотокаталог!</div>
        <div>Полный каталог продукции Docke с рекомендациями специалистов завода и подбором
            цветовой гаммы материалов</div>
        <div class="staypopup-desc">Куда отправить фотокатолог?</div>
        <form method="POST" id="form_stay" class="reiew_form"
              action="javascript:void(null);">
            <div class="inner-adress">
                <input id="E-mail" type="radio" name="checkbox" value="E-mail">
                <label for="E-mail"><nobr>E-mail</nobr></label>
                <input id="WhatsApp" type="radio" name="checkbox" value="WhatsApp">
                <label for="WhatsApp">WhatsApp</label>
                <input id="Telegram" type="radio" name="checkbox" value="Telegram">
                <label for="Telegram">Telegram</label>
                <input id="Viber" type="radio" name="checkbox" value="Viber"><label
                    for="Viber">Viber</label>
            </div>
            <input id="contact_phone" name="contact_phone" class="mask-bar" type="text"
                   placeholder="Ваш номер" required>
            <input id="contact_email" name="contact_email"
                   type="text" placeholder="Ваш e-mail" required>
            <input class="button-review" type="submit" value="Отправить">
        </form>
        <div class="staypopup-img"><img src="assets/img/catalog-img-popup.png" alt="">
        </div>
        <div class="results main-data-inf"> </div>
    </div>
</div>

4
  • @Алёна Чащина Да не за что. Если что пишите. Только, указывайте, пожалуйста, ник через @, чтобы мог увидеть сообщение ) Только сегодня увидел Ваше сообщение.
    – Denis640Kb
    4 мар 2020 в 21:09
  • @Denis640Kb Добрый день! И снова вернулась к этому вопросу. У меня сайт на MODx, соответственно пункты 3,4 и 5 разнесены по системе, поэтому эта часть кода лишняя. Можно как-то просто оставить проверку куков и все, а то вы меня совсем запутали 18 мар 2020 в 5:59
  • @АлёнаЧащина Они не могут быть лишними. Функцию sendstay() обязательно надо перенести, так как мы же отслеживаем нажатие кнопки, чтобы при нажатии, мы могли проставить данные в localstorage для того, чтобы окно больше не открывалось. Что касается 4 пункта - это дополнительная проверка, которой у Вас не было, она же не может находится в другом месте. Проверка абсолютно логична, иначе при выводе мышки за пределы попап снова будет открываться. Пункт 5 - чтобы убрать закрытие popup Вы можете убрать последние три строки кода.
    – Denis640Kb
    18 мар 2020 в 8:24
  • @АлёнаЧащина Но логично перенести всё в одно место, не понимаю пока Вашего стремления использовать это в разных местах.
    – Denis640Kb
    18 мар 2020 в 8:24

Ваш ответ

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

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