wake-up-neo.net

Ein Popup nur einmal pro Benutzer anzeigen

Auf diese Frage gibt es bereits Antworten, aber ich bin mir immer noch nicht sicher, wie es genau funktioniert.

Ich verwende den folgenden HTML-Code in meiner footer.php:

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

und das folgende 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(); 
    });
});

Alles funktioniert großartig, aber ich möchte das Popup-Fenster nur einmal pro Benutzer anzeigen (möglicherweise verwenden Sie die Cookie-Sache, über die alle Forenbeiträge laufen), aber ich weiß nicht genau, wie ich es in die JS oben einbauen soll.

Ich weiß, dass ich den Cookie JS in meine Fußzeile mit diesem laden muss:

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

Aber das ist alles was ich verstehe. Kann mir jemand genau sagen, wie die JS/jQuery aussehen soll, wenn das Cookie-Zeug hinzugefügt wird?

Vielen Dank

James

22

* Hinweis: Es wird ein Popup pro Browser angezeigt, da die Daten im Browserspeicher gespeichert werden.

Probieren Sie HTML localStorage.

Methoden:

  • 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.
    });
});

Arbeitsdemo

70
Shaunak D

Dieses Beispiel verwendet jquery-cookie

Prüfen Sie, ob der Cookie existiert und nicht abgelaufen ist. Wenn einer der beiden fehlschlägt, zeigen Sie das Popup an und setzen Sie den Cookie (Semi-Pseudocode):

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(); 
    });
};

Sie können dieses Problem mit PHP umgehen. Sie geben den Code für das Popup nur beim ersten Laden der Seite aus. 

Der andere Weg ... ist das Setzen eines Cookies, der im Wesentlichen eine Datei ist, die sich in Ihrem Browser befindet und Daten enthält. Beim ersten Laden der Seite würden Sie ein Cookie erstellen. Dann prüfen Sie auf jeder Seite, ob Ihr Cookie gesetzt ist. Wenn es eingestellt ist, wird das Popup nicht angezeigt. Wenn dies nicht festgelegt ist, setzen Sie den Cookie und zeigen Sie das Popup an.

Pseudo-Code:

if(cookie_is_not_set) {
    show_pop_up;
    set_cookie;
}
2
Bioto

Sie können die removeItem()-Klasse von localStorage verwenden, um diesen Schlüssel in der Browser-Nähe zu zerstören: 

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

Der Code zeigt nur einmal das Popup (Bootstrap Modal im Fall):

modal.js

 $(document).ready(function() {
     if (Cookies('pop') == null) {
         $('#ModalIdName').modal('show');
         Cookies('pop', '365');
     }
 });

Hier ist das vollständige Code-Snipet für Rails:

Fügen Sie das obige Skript zu Ihrem js repo hinzu (in Rails: app/javascript/packs)

In Rails haben wir einen speziellen Packweg für Skript, also: 

  1. Laden Sie das js-cookie-Plugin herunter (zur Verwendung mit Javascript Cokkies erforderlich) https://github.com/js-cookie/js-cookie (der Name sollte "js.cookie.js" sein)

    /*!
     * JavaScript Cookie v2.2.0
     * https://github.com/js-cookie/js-cookie
     *
     * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
     * Released under the MIT license
     */
    ;(function (factory) {
      var registeredInModuleLoader = false;
      if (typeof define === 'function' && define.AMD) {
        define(factory);
        registeredInModul
     ...
    
  2. Fügen Sie //= require js.cookie zu application.js hinzu.

Es funktioniert perfekt für 365 Tage!

0
Gregdebrick

Eine schnelle Antwort für Leute, die Ionic verwenden. Ich muss nur einmal einen Tooltip anzeigen, also habe ich $ localStorage verwendet, um dies zu erreichen. Dies ist für die Wiedergabe eines Tracks. Wenn sie Play spielen, wird der Tooltip einmal angezeigt.

$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();
    }
}
0
Kyle Pennell