web-dev-qa-db-ja.com

ユーザーごとに1回だけポップアップを表示する

この質問にはすでに回答がありますが、それがどのように機能するのか正確にはわかりません。

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

すべてがうまく機能しますが、ユーザーごとにポップアップを表示したいだけです（フォーラムのすべての投稿で使用されるCookieを使用することもあります）が、上記のJSにどのように組み込むかはわかりません。

私はこれでフッターにクッキーJSをロードする必要があることを知っています：

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

しかし、それは私が理解していることのすべてです。Cookieが追加されたJS/jQueryの外観を正確に教えてくれる人はいますか？

ありがとう

ジェームス

javascriptjquerycookies
25
James Waterhouse

*注意：データはブラウザのメモリに保存されるため、ブラウザごとに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.
    });
});

作業デモ

70
Shaunak D

この例では 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(); 
    });
};
4
Calvin deClaisse-Walford

Phpを使用してこの問題を回避できます。最初のページのロード時にのみ、ポップアップのコードをエコーアウトします。

他の方法は... Cookieを設定することです。Cookieは、基本的にブラウザに存在し、何らかのデータを含むファイルです。最初のページの読み込みで、Cookieを作成します。その後、すべてのページでCookieが設定されているかどうかを確認します。設定されている場合、ポップアップは表示されません。ただし、設定されていない場合は、Cookieを設定してポップアップを表示します。

擬似コード：

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

removeItem()クラスのlocalStorageを使用して、ブラウザを閉じるときにそのキーを破棄できます。

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

ポップアップを1回だけ表示するコード（この場合はBootstrap Modal）：

modal.js

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

Railsの完全なコードスニペット：

上記のスクリプトをjsリポジトリに追加します（in Rails：app/javascript/packs））

Railsでは、スクリプトの特定のパッキング方法があります。

  1. Js-cookieプラグインをダウンロードします（Javascript Cokkiesで動作する必要があります） https://github.com/js-cookie/js-cookie （名前は 'js.cookie.js'でなければなりません）

    /*!
 * 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. 追加 //= require js.cookie〜application.js

365日間完全に機能します！

0
Gregdebrick

Ionicを使用しているユーザーに迅速な回答を提供します。ツールチップを表示する必要があるのは1回だけなので、これを実現するために$ localStorageを使用しました。これはトラックを再生するためのものであるため、再生をプッシュすると、ツールチップが1回表示されます。

$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