2017-01-25 5 views
2

Я хочу показать всплывающее окно только один раз за сеанс, срок действия которого истекает через некоторое время. Кто-нибудь может мне помочь?Отображать всплывающее окно только один раз за посещение

function PopUp(){ 
    $('.home-popup').fadeIn(500); 
} 

setTimeout(function(){ 
    PopUp(); 
},1000); // 1000 to load it after 1 second from page load 

$('.close-popup-btn').click(function() { 
    $('.popup').fadeOut(300); 
}); 
+0

Вы хотите иметь всплывающее окно исчезнет автоматически? В этом случае вы также можете установить функцию обратного вызова на fadeIn, которая должна произойти, когда она завершится, чтобы исчезнуть после заданного интервала. Если вы хотите убедиться, что всплывающее окно не будет всплывать во время заданного сеанса, установите cookie. – Snowmonkey

+0

@Snowmonkey У меня есть кнопка закрытия для всплывающего окна fadeOut, а не закрытие автоматически. Как установить cookie, например? – Bane

ответ

4

Вы можете использовать LocalStorage для этого, как хорошо. Для того, чтобы установить элемент хранения: localStorage.setItem('myPopup','true'); и проверить для этого вы могли бы сделать что-то вроде этого:

var poppy = localStorage.getItem('myPopup'); 

if(!poppy){ 
    function PopUp(){ 
     $('.home-popup').fadeIn(500); 
    } 

    setTimeout(function(){ 
     PopUp(); 
    },1000); // 1000 to load it after 1 second from page load 

    $('.close-popup-btn').click(function() { 
     $('.popup').fadeOut(300); 
    }); 
    localStorage.setItem('myPopup','true'); 
} 
+0

Он работает! Могу ли я установить дату опыта здесь как-то? – Bane

+0

Срок годности не истекает. Но если вы хотите, чтобы он очистился, когда пользователь закрыл браузер или вкладку, вы можете сделать следующее: '$ (window) .bind ('beforeunload', function() { localStorage.removeItem ('myPopup'); }); ' – oompahlumpa

+0

Я лично использую это для всплывающего окна электронной почты, в котором я хочу, чтобы мои пользователи видели его один раз. И не обманывайте его, и это работает очень хорошо. Если требуется конкретная дата истечения срока действия, вам придется использовать файл cookie. LocalStorage быстро и легко. – oompahlumpa

0

, если на «на сессии» вы имеете в виду «на странице загрузки»:

$(document).ready(function(){ 
function PopUp(){ 
    $('.home-popup').fadeIn(500); 
} 

setTimeout(function(){ 
    PopUp(); 
},1000); // 1000 to load it after 1 second from page load 

$('.close-popup-btn').click(function() { 
    $('.popup').fadeOut(300); 
}); 
}); 
2

Я установил бы печенье со значением при первом посещении popupSent, и проверить, если печенье существует перед вызовом функция PopUp. Вот грубый реализация с куки вспомогательных функций, отсюда: Set cookie and get cookie with JavaScript

function PopUp(){ 
    $('.home-popup').fadeIn(500); 
    createCookie('popup','1'); 
} 
if(readCookie('popup')){ 
    // 1000 to load it after 1 second from page load 
    setTimeout(PopUp,1000); 
} 
$('.close-popup-btn').click(function() { 
    $('.popup').fadeOut(300); 
});