Модальное окно с использование куки

186
23 января 2018, 13:25

Это исходный код модального окна, которое постоянно выскакивает при загрузке страницы.

Нужно что бы результаты сохранялись в куки: если пользователь нажимает на Yes его пропускает дальше, если No то редирект на google.com Если пользователь ставит отметку в чекбоксе Remember Me то сохранить это значение в куках, чтоб при следующем входе этот попап не появлялся.

            <div class="verification-popup-wrapper">
                <div class="verification-popup">
                    <div class="popup-contents-wrapper">
                        <i class="close"></i>
                        <h2>Welcome to Website!</h2>
                        <div class="popup-content">
                            <p>To continue, please confirm your age.</p>
                            <p>Are you 21+?</p>
                        </div>
                        <form method="post" action="" class="age-gate-form">  
                          <button type="submit" value="yes" class="age-gate-submit-yes" name="confirm">Yes</button>
                          <button type="submit" value="no" class="age-gate-submit-no" name="confirm">No</button>
                          <div>
                            <input type="checkbox" id="rememberMe" name="remember" value="remember">
                            <label for="rememberMe">Remember me</label>
                          </div>
                        </form>
                    </div>
                </div>
            </div>
Answer 1

Кстати не обязательно отправлять форму на север, вы вполне можете записать куку и с помощью JS. Кстати в интернете уже давно написаны удобные функции, поэтому изобретать велосипед не стоит.

function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {   
    document.cookie = name+'=; Max-Age=-99999999;';  
}

Допустим, добавим куку test со значением "1", которая будет хранится 7 дней:

setCookie('test', '1', 7);

Получить куку:

var count = getCookie('test');

Теперь просто при нажатии на кнопку "нет" делайте редирект на google.ru, а при нажатии на "да", закрывайте окно и добавляйте куку. Ну соответственно при открытии сайта проверяйте наличие куки.

Если нужно решение на jQuery, то для это есть библиотека https://github.com/carhartl/jquery-cookie, которая ещё сильнее упростит процесс.

READ ALSO
Распарсить JSON и получить значение на PHP

Распарсить JSON и получить значение на PHP

Знаю, что нужно подучить получение массивов на PHP но время поджимаетПодскажите пожалуйста, есть такой JSON, хочу получить значение price по id например:...

334
Не работает валидация формы

Не работает валидация формы

Есть такой код для обновления пароля:

247
Как принять обмен steam php?

Как принять обмен steam php?

здравствуйте у меня есть такой код

255
Как добавить возможность вывода цены в поисковый запрос к2store?

Как добавить возможность вывода цены в поисковый запрос к2store?

Добрый вечерПеределываю под себя шаблон на k2store В интернет магазине сделанном на k2store Установил модуль JA K2 Filter and Search Нашел файл отвечающий...

540