Question

我已经在页面加载时设置了叠加背景，但是我只需要为每个用户加载一次，这样如果单击页面然后返回，则不会再次看到叠加层。任何帮助都将受到高度赞赏。这是我的代码：

<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

尝试以下

<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>

Answer 2

通过点击页面，我假设你的意思是刷新页面后你不希望它再次显示。为此，您需要在页面刷新时跟踪用户状态。您需要将用户在页面中看到该页面的信息存储在数据库中，或者存储在页面刷新时持久存在的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";
  }
}

编辑：我用一个有效的例子创造了一个要点。 https://gist.github.com/kemiller2002/658e69a899e874e01026ba05f83f7454

在页面加载时弹出，仅为每个用户加载一次

2 个答案: