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

Question

ウェルカムdivをユーザーまたはセッションごとに1回だけ表示したい。私は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>

、ユーザがブラウザを閉じるまで、私は、一度だけこのウェルカムページを表示したい... がクッキーを設定し、貴重な助け

Answer 1

を待ち助けてください。

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

jQuery.cookieのjavascriptファイルを含める必要があります。

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

Answer 2

私たちはその場に隠れたときに

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

    } 
}); 

Answer 3

場合は、あなたのクライアントは、クッキー

を食べていない点滅表示されませんので、それは良いでしょう sessionStorageを使用できますは、まさにそれらが正確に意味するものなので、セッション中のデータの収集を手近に保ちます。

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

ウェルカムメッセージが

表示が示されているのであれば、全体の手順は

1. チェック...のように簡単になるだろう！ ： Take-no-action！

完了。

例コード：

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

コード切り取り領域が適切なウェルカムメッセージ要素の後に、置く（好ましく以上）スクリプトタグにすることができます。

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

よろしく：

しかし、完全な下位互換性を維持するために、あなたは常にバックのようにプロパティをセッション名を使用することに落ちることができます。