Отображать всплывающие окна только один раз на пользователя

На этот вопрос уже были ответы, но я все еще не уверен, как это работает.

Я использую следующий HTML-код в моем footer.php:

<div id="popup">
    <div>
        <div id="popup-close">X</div>
            <h2>Content Goes Here</h2>
    </div>
</div>

и следующий Javascript:

$j(document).ready(function() {
    $j("#popup").delay(2000).fadeIn();
    $j('#popup-close').click(function(e) // You are clicking the close button
    {
    $j('#popup').fadeOut(); // Now the pop up is hiden.
    });
    $j('#popup').click(function(e) 
    {
    $j('#popup').fadeOut(); 
    });
});

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

Я знаю, что мне придется загрузить cookie JS в нижнем колонтитуле с помощью этого:

<script type="text/javascript" src="scripts/jquery.cookies.2.2.0.min.js"></script>

Но это все, что я понимаю, может ли кто-нибудь сказать мне, как JS/jQuery должен выглядеть с добавлением файла cookie?

Спасибо

Джеймс

Ответы

Ответ 1

* Примечание. Это отображает всплывающее окно один раз в браузере, поскольку данные хранятся в памяти браузера.

Попробуйте HTML localStorage.

Методы:

localStorage.getItem('key');
localStorage.setItem('key','value');

$j(document).ready(function() {
    if(localStorage.getItem('popState') != 'shown'){
        $j("#popup").delay(2000).fadeIn();
        localStorage.setItem('popState','shown')
    }

    $j('#popup-close, #popup').click(function(e) // You are clicking the close button
    {
        $j('#popup').fadeOut(); // Now the pop up is hiden.
    });
});

Рабочий демонстрационный пример

Ответ 2

В этом примере используется jquery-cookie

Проверьте, существует ли файл cookie и истек ли он - если кто-либо из них не работает, затем отобразите всплывающее окно и установите cookie (полу-псевдо-код):

if($.cookie('popup') != 'seen'){
    $.cookie('popup', 'seen', { expires: 365, path: '/' }); // Set it to last a year, for example.
    $j("#popup").delay(2000).fadeIn();
    $j('#popup-close').click(function(e) // You are clicking the close button
        {
        $j('#popup').fadeOut(); // Now the pop up is hiden.
    });
    $j('#popup').click(function(e) 
        {
        $j('#popup').fadeOut(); 
    });
};

Ответ 3

Вы можете обойти эту проблему, используя php. Вы только выходите из кода для всплывающего окна при загрузке первой страницы.

Другой способ... Установить куки файл, который в основном является файлом, который находится в вашем браузере, и содержит какие-то данные. При загрузке первой страницы вы создадите файл cookie. Затем каждую страницу после этого вы проверяете, установлен ли ваш файл cookie. Если он установлен, не отображается всплывающее окно. Однако, если он не установлен, установите cookie и отобразите всплывающее окно.

Псевдокод:

if(cookie_is_not_set) {
    show_pop_up;
    set_cookie;
}

Ответ 4

Предлагаем быстрый ответ для людей, использующих Ionic. Мне нужно показать всплывающую подсказку только один раз, поэтому я использовал $localStorage для этого. Это для воспроизведения дорожки, поэтому, когда они нажимают кнопку воспроизведения, она показывает подсказку один раз.

$scope.storage = $localStorage; //connects an object to $localstorage

$scope.storage.hasSeenPopup = "false";  // they haven't seen it


$scope.showPopup = function() {  // popup to tell people to turn sound on

    $scope.data = {}
    // An elaborate, custom popup
    var myPopup = $ionicPopup.show({
        template: '<p class="popuptext">Turn Sound On!</p>',
        cssClass: 'popup'

    });        
    $timeout(function() {
        myPopup.close(); //close the popup after 3 seconds for some reason
    }, 2000);
    $scope.storage.hasSeenPopup = "true"; // they've now seen it

};

$scope.playStream = function(show) {
    PlayerService.play(show);

    $scope.audioObject = audioObject; // this allow for styling the play/pause icons

    if ($scope.storage.hasSeenPopup === "false"){ //only show if they haven't seen it.
        $scope.showPopup();
    }
}

Ответ 5

Вы можете использовать класс removeItem() localStorage, чтобы уничтожить этот ключ в браузере:

window.onbeforeunload = function{
    localStorage.removeItem('your key');
};