Почему моя функция всплывающих окон не работает должным образом? - PullRequest
Новая
       12

Почему моя функция всплывающих окон не работает должным образом?

0 голосов
/ 22 января 2020

Я постараюсь быть максимально лаконичным и ясным! Половина моей проблемы - это правильная формулировка моего вопроса;)

Я создал липкую всплывающую страницу на своем сайте, чтобы собирать электронные письма для нашей рассылки, и настроил ее так, чтобы localStorage запоминал закрытое состояние всплывающее окно (чтобы посетители нашего веб-сайта не раздражались, когда он выскакивает при каждой загрузке страницы).

Это работает нормально, но сегодня я подумал, что было бы неплохо добавить кнопку, которая при нажатии могла бы откройте всплывающее окно (так как оно будет оставаться закрытым, пока они не очистят свой кэш, в противном случае они могут захотеть получить доступ к всплывающему окну, не зная, что это сделать).

Я использую Weebly и единственный вариант, который мне нужно получить кнопка в меню навигации позволяет добавить страницу внешней ссылки и затем использовать javascript, чтобы убрать http: // , который вставляется Weebly, и ввести код для вызова моего всплывающего окна. Это работает, но происходит то, что всплывающее окно открывается после закрытия, когда я перехожу на другую страницу. Как ни странно, это происходит только один раз, и затем запоминается закрытое состояние.

Кажется, что это повторяется, поэтому в моей логике / коде должен быть какой-то недостаток, но я не могу понять, что это такое, и буду очень признателен за любые советы или подсказки!

Кому см. соответствующую кнопку в действии:

https://www.reclaimdesign.org

Это + в крайнем правом углу верхнего навигационного меню.

Код, вызываемый из нижнего колонтитула: 

<!--Use localStorage To Hide Signup Box If Closed-->
<script src="https://www.reclaimdesign.org/uploads/2/4/9/8/24985082/custom_themes/606760176814155089/files/hide-signup-min.js" async="async"></script>

$(window).on("load", function() {
        $("a[href='/page.html']").attr("href", "javascript:(function(){$('.signup').css('display', 'block');})()");
    });

А вот код в скрытой регистрации. js: 

$(document).ready(function() {

$('.signup').css('display', 'block');

$PopUp = $('.signup');

var hide = JSON.parse(localStorage.getItem('hide'));

if (hide) {
    $PopUp.hide();
} else {
    // initialize value in case it hasn't been set already
    localStorage.setItem('hide', false);
}

$('.closebtn').click(function() {
    $('.signup' ).hide();
    // toggle the boolean by negating its value
    var hide = JSON.parse(localStorage.getItem('hide'));
    localStorage.setItem('hide', !hide);
});

});

1 Ответ

0 голосов
/ 22 января 2020

Вот что происходит:

1- Начальная загрузка (новый пользователь): скрыть ложь, как указано в вашем коде

2- Пользователь нажимает кнопку закрытия: скрытие становится истинным

3- Пользователь нажимает кнопку +: ничего не происходит (следует изменить скрытие на true в localstorage)

4- Пользователь снова нажимает кнопку закрытия: скрытие становится ложным (это заставляет всплывающее окно появляться на другой странице загрузить)

На третьем шаге нужно сделать 

localStorage.setItem('hide', false);
...