如何只出现一次弹出窗口/浏览器？

Question

我遇到了问题。 我只想在我的网站主页上显示一个弹出图像。如果我重新加载页面，图像不应该出现，但它会再次出现。我怎么解决这个问题？我尝试使用会话 cookie，但它对我没有帮助。

    document.cookie = 'cookie=appear';
    
    if (document.cookie = 'cookie=appear' == 'cookie=appear'){
    function close_function(){
        document.getElementById("popup").style.display = "none";    
        document.cookie = 'cookie=notappear';
    }
    }
    if (document.cookie = 'cookie=notappear' == 'notappear'){
        document.getElementById("popup").style.display = "none";
    }

<div id="popup" style="position: fixed; bottom: 0; left: 100px;"><a href="https://www.google.com/"><img class="alignleft" src="folder/picture.jpg" width="300" height="207"></a><button id="close" type="closebutton" onclick="close_function()">X</button></div>

我可以关闭弹出窗口，但是如果我转到我网站上的其他页面然后返回它会再次出现，我不想再次显示它。仅一次/浏览器。

我的意思是，如果我关闭谷歌浏览器并重新打开网站，弹出窗口应该会再次出现。有什么想法吗？

Answer 1

您的代码的问题在于，每当您重新加载页面时，您都会运行这段代码：

document.cookie = "cookie=appear";

所以无论 cookie 是什么，它都会被设置为“cookie=appear”；

const popup = document.getElementById("popup");

if(document.cookie == '' || document.cookie == 'cookie=appear') {
     popup.style.display = "inline";
} else {
     popup.style.display = "none";
}

function close_function() {
     document.cookie = "cookie=notappear";
     popup.style.display = "none";
}

<div id="popup" style="position: fixed; bottom: 0; left: 100px;"><a href="https://www.google.com/"><img class="alignleft" src="folder/picture.jpg" width="300" height="207"></a><button id="close" type="closebutton" onclick="close_function()">X</button></div>

这对我有用。

Answer 2

使用 LocalStorage 存储信息/记录访问次数

Answer 3

您是否尝试过使用 Bootstrap Modal 代替？它有助于堆并且可以节省大量时间:)

Answer 4

也许您应该尝试使用 Bootstrap Modal，然后使用 CSS 自定义其不透明度

.modal-backdrop { opacity:1 !important; }

!important 防止不透明度被覆盖 - 特别是在这种情况下从 Bootstrap 覆盖。