每个用户只能显示一次popup窗口
已经有这个问题的答案,但我仍然不确定它是如何工作的。
我在我的footer.php中使用下面的HTML:
<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(); }); });
一切都很好,但我只想显示每个用户popup一次(也许使用cookie的东西,所有的论坛post继续),但我不知道如何将它纳入上面的JS。
我知道,我将不得不在我的页脚加载Cookie JS:
<script type="text/javascript" src="scripts/jquery.cookies.2.2.0.min.js"></script>
但是这就是我所能理解的,任何人都可以告诉我究竟JS / jQuery应该如何看待添加的cookie的东西?
谢谢
詹姆士
*注意:由于数据存储在浏览器内存中,因此每个浏览器会显示一次。
试试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. }); });
工作演示
这个例子使用jquery-cookie
检查cookie是否存在并且没有过期 – 如果其中任一个失败,则显示popup窗口并设置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(); }); };
你可以解决这个问题使用PHP。 你只能回显第一页加载popup窗口的代码。
另一种方法是设置一个基本上是位于浏览器中并包含某种数据的文件的cookie。 在第一页加载你会创build一个cookie。 然后,每一页之后,你检查你的cookie是否设置。 如果设置不显示popup。 但是,如果没有设置cookie并显示popup窗口。
伪代码:
if(cookie_is_not_set) { show_pop_up; set_cookie; }
为使用离子的人提供一个快速的答案。 我只需要显示一个工具提示,所以我使用$ 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(); } }
你可以使用removeItem()
类的removeItem()
类来closures浏览器上的关键字:
window.onbeforeunload = function{ localStorage.removeItem('your key'); };