ページ読み込み時にポップアップするユーザーごとに1回だけ読み込む場合

Question

ページロード時にオーバーレイバックグラウンドを設定しましたが、ユーザーごとに1回ロードする必要があるため、ページをクリックして戻ってくるとオーバーレイは表示されません再び。これについての助けがあれば、非常に感謝しています。ここに私のコードです：

<div class="overlay-bg"> 

    <div class="overlay-inner"> 
     <h2>To explore more simply...</h2> 

    <div class="col-xs-4"> 
     <p>Drag</p> 
     <img src="AW16/pages/AW16_Lookbook_Timeoutmessage_03_02_new.gif?$staticlink$" alt="Hit List" height="85" width="80"> 
    </div> 
    <div class="col-xs-4 middle-col"> 
     <p>or</p> 
    </div> 
    <div class="col-xs-4"> 
     <p>Use arrow</p> 
     <img src="AW16/pages/AW16_Lookbook_Timeoutmessage_05_02_new.gif?$staticlink$" alt="Hit List" height="85" width="123"> 
    </div> 
    <a class="close-btn-new">CLOSE</a> 

</div> 

<script type="text/javascript"> 
$(document).ready(function(){ 

// function to show our popups 
function showPopup(whichpopup){ 
if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") { 
$('.overlay-bg').show(); //display your popup background and set  height to the page height 
document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT"; 
} 
} 

// function to close our popups 
function closePopup(){ 
$('.overlay-bg').hide(); //hide the overlay 
} 


// hide popup when user clicks on close button or if user clicks  anywhere outside the container 
$('.close-btn-new, .overlay-bg').click(function(){ 
closePopup(); 
}); 


}); 
</script> 

Answer 1

次、私はあなたがそれをしたくないページを更新した後、意味と仮定していますもう一度表示します。これを行うには、ページの更新時にユーザーの状態を追跡する必要があります。ユーザーがページで見た情報をデータベースに保存するか、ページの更新時に永続的なCookieなどの情報を保存する必要があります。

あなたは、Mozilla MDNサイトに一度だけ何かをするサイトを設定するコードを見つけることができます。

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

code from mozilla site: 

function doOnce() { 
    if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") { 
    alert("Do something here!"); 
    document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT"; 
    } 
} 

EDIT： 私は作業例と要旨を作成しました。 https://gist.github.com/kemiller2002/658e69a899e874e01026ba05f83f7454

Answer 2

試してみてくださいページをオフクリックすると

<script type="text/javascript"> 
$(document).ready(function(){ 

// function to show our popups 
function showPopup(whichpopup){ 
    if (typeof(localStorage.popupDisplayCount) == "undefined") { 
     localStorage.popupDisplayCount = 1; 
     $('.overlay-bg').show(); //display your popup background and set  height to the page height 
    } 
} 

// function to close our popups 
function closePopup(){ 
$('.overlay-bg').hide(); //hide the overlay 
} 


// hide popup when user clicks on close button or if user clicks  anywhere outside the container 
$('.close-btn-new, .overlay-bg').click(function(){ 
closePopup(); 
}); 


}); 
</script>