web-dev-qa-db-ja.com

ウェルカムdivをユーザー/ブラウザセッションごとに1回だけ表示する

ユーザーまたはセッションごとに1回だけウェルカムdivを表示したい。 Jqueryオプションがあることを知っています。 jqueryの初心者なので、自分で解決することはできませんでした。助けてください

$(document).ready(function() {
  $("#close-welcome").click(function() {
    $(".welcome").fadeOut(1000);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="welcome">
  <div>
    <h1>Hello..!<br> Welcome to ABC
    <br>
    </h1>
    <h2>We wish you a Great Day..!</h2>
    <br>

    <h2><a id="close-welcome" href="#">Thank you.. and please take me to the     website</a> </h2>
  </div>
</div>

ユーザーがブラウザを閉じるまで、このウェルカムページを1回だけ表示したい。貴重なヘルプを待っている

jquerysessionhtmlhide
12
Gops

クッキーを設定します。

$(document).ready(function() {
    if ($.cookie('noShowWelcome')) $('.welcome').hide();
    else {
        $("#close-welcome").click(function() {
            $(".welcome").fadeOut(1000);
            $.cookie('noShowWelcome', true);    
        });
    }
});

JQuery.cookiejavascriptファイルを含める必要があります。

https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js

30
mkhatib

クライアントがクッキーを食べない場合

sessionStorageを使用できます。これがまさにその目的であるため、セッション全体を通じてデータのコレクションを手元に置いておくことができます。

最高のユーザーエクスペリエンスを得るには、既存のCSSの最初の[wellcomeElement] .style.display = "none"プロパティから始める必要があります。

したがって、全体の手順は次のように簡単になります...

  1. ウェルカムメッセージが表示されているかどうかを確認します
  2. 公演！ :何もしないでください！

完了。

サンプルコード：

  "message" in sessionStorage ? 0 :
  [wellcomeElement].style.display = "block",
  sessionStorage.setItem("message",true);

コードスニップは、ウェルカムメッセージ要素の直後のスクリプトタグに（ただし、できればそれ以上に）配置できます。

ただし、完全な下位互換性のために、次のようにセッション名プロパティの使用にいつでもフォールバックできます。

 /message/.test( name ) ? 0 :
 [wellcomeElement].style.display = "block",
 name = 'message';

よろしく。

4
Bekim Bacaj

その場で隠れているときにまばたきが見られないので、より良いです

<a href="" id="close-edu" class="waves-effect"><span class="edu" style="display: none;">New</span></a>

jquery

$(document).ready(function() {
    if ($.cookie('noShowEducation')) ;
    else {
        $('.edu').show();
        $("#close-edu").click(function() {
            $(".edu").fadeOut(1000);
            $.cookie('noShowEducation');    
        });

    }
});
1
Artem Bernatskyi