Отобразить модальный режим после просмотра x страниц с помощью JS Cookie? - PullRequest
Новая
       25

Отобразить модальный режим после просмотра x страниц с помощью JS Cookie?

2 голосов
/ 02 апреля 2019

Я пытаюсь отобразить Bootstrap модальные avec 3 страницы, просмотренные на моем веб-сайте, и найти актуализированное решение этого вопроса с помощью плагина JS-Cookie.

Я попробовал этот код, но он не работает: 

$(document).ready(function () {
    // create cookie
    var visited = Cookies('visited'); // visited = 0
    if (visited >= 3) {
        // open fancybox after 3 secs on 4th visit or further on the same day
        $('#my_modal').modal('show');
    } else {
        visited++; // increase counter of visits
        // set new cookie value to match visits
        Cookies('visited', visited, {
            expires: 1 // expires after one day
        });
        return false;
    }
}); // ready

Что должен делать приведенный выше код: запросить модал после перезагрузки на 4 страницы, как здесь
Что не работает: я перезагружаю страницу, но модал не появляется

Вот мое состояние файла cookie (в chrome): Изображение по этой ссылке

Это пример кода, который на самом деле работает для отображения модального состояния при первом посещении веб-сайта: 

$(document).ready(function() {
  if (Cookies('pop_welcome') == null) {
         $('#my_modal').modal('show');
     Cookies('pop_welcome', '31', { expires: 31 });
  }
 });

** - Решение - **

Вы можете найти решение в коде кода @greedchikara

код: 

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(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) {
    createCookie(name,"",-1);
}

var visited = readCookie('tester') || 1;

if (visited > 2) {
  $('#my_modal').modal('show');
} else {
  visited++;
  createCookie('tester', visited, 1);
}

Можете ли вы помочь мне? Спасибо

Вот код плагина JS cookie.

Ответы [ 2 ]

1 голос
/ 02 апреля 2019

Вы можете использовать эти три простые функции для выполнения задач cookie, сторонняя библиотека не требуется. 

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(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) {
    createCookie(name,"",-1);
}
0 голосов
/ 02 апреля 2019 
$(document).ready(function() {
  // create cookie
  var visited = $.cookie('visited'); // visited = 0
  if (visited >= 3) {
    setTimeout(function() {
      $('#my_modal').modal('show'); //make sure model is already created with id my_model 
    }, 1000);
  } else {
    visited++; // increase counter of visits
    // set new cookie value to match visits
    $.cookie('visited', visited, {
      expires: 1 // expires after one day
    });
    return false;
  }
});


Make sure all dependent js are included.

Плагин jQuery здесь https://github.com/carhartl/jquery-cookie

...