当前位置：文江博客话题详情

使用 JavaScript 和 cookie 隐藏块（并记住它）？

发布于 2024-12-21 14:59:22 字数 262 浏览 1 评论 0原文

我想在我的网站上实现 show-hidden div 块，就像在 stackoverflow.com 上一样 - 当用户想要隐藏它时，自己将其放在按钮“X”上。可能已经有现成的解决方案了？我不太懂 JavaScript，非常感谢您的帮助！

图片：

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柠檬色的秋千 2024-12-28 14:59:22

这是一个简单的工作示例，无需使用任何外部库。您可以通过动画/设计来改进它。此外，这些 cookie 函数可以非常简单，但您将来可以使用它来设置布尔值。
更新：我添加了再次显示弹出窗口的功能（主要用于调试）。

<html>
<head>
<script type="text/javascript">
function setCookie (name, value, expires, path, domain, secure) {
    document.cookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
}
function getCookie (name) {
    var cookie = " " + document.cookie;
    var search = " " + name + "=";
    var setStr = null;
    var offset = 0;
    var end = 0;
    if (cookie.length > 0) {
        offset = cookie.indexOf(search);
        if (offset != -1) {
            offset += search.length;
            end = cookie.indexOf(";", offset);
            if (end == -1) {
                end = cookie.length;
            }
            setStr = unescape(cookie.substring(offset, end));
        }
    }
    if (setStr == 'false') {
        setStr = false;
    } 
    if (setStr == 'true') {
        setStr = true;
    }
    if (setStr == 'null') {
        setStr = null;
    }
    return(setStr);
}
function hidePopup() {
    setCookie('popup_state', false); 
    document.getElementById('popup').style.display = 'none';
}
function showPopup() {
    setCookie('popup_state', null);
    document.getElementById('popup').style.display = 'block';
}
function checkPopup() {
    if (getCookie('popup_state') == null) { // if popup was not closed
        document.getElementById('popup').style.display = 'block';
    }   
}

</script>
</head>
<body onload="checkPopup();">
     <div id="popup" style="display:none">Hello! Welcome to my site. If you want to hide this message then click <a href="#" onclick="hidePopup(); return false;">[x]</a></div>
     <div>Some static text here.</div>
     <div>Bring me <a href="#" onclick="showPopup(); return false;">back</a> my popup!</div>
</body>
</html>

This is simple working example without using any external library. You can improve it with your animation/design. Also these functions for cookies can be very simplier but you can use it in future to set not only boolean value.
UPDATE: I added functon for show your popup again (for debug mostly).

<html>
<head>
<script type="text/javascript">
function setCookie (name, value, expires, path, domain, secure) {
    document.cookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
}
function getCookie (name) {
    var cookie = " " + document.cookie;
    var search = " " + name + "=";
    var setStr = null;
    var offset = 0;
    var end = 0;
    if (cookie.length > 0) {
        offset = cookie.indexOf(search);
        if (offset != -1) {
            offset += search.length;
            end = cookie.indexOf(";", offset);
            if (end == -1) {
                end = cookie.length;
            }
            setStr = unescape(cookie.substring(offset, end));
        }
    }
    if (setStr == 'false') {
        setStr = false;
    } 
    if (setStr == 'true') {
        setStr = true;
    }
    if (setStr == 'null') {
        setStr = null;
    }
    return(setStr);
}
function hidePopup() {
    setCookie('popup_state', false); 
    document.getElementById('popup').style.display = 'none';
}
function showPopup() {
    setCookie('popup_state', null);
    document.getElementById('popup').style.display = 'block';
}
function checkPopup() {
    if (getCookie('popup_state') == null) { // if popup was not closed
        document.getElementById('popup').style.display = 'block';
    }   
}

</script>
</head>
<body onload="checkPopup();">
     <div id="popup" style="display:none">Hello! Welcome to my site. If you want to hide this message then click <a href="#" onclick="hidePopup(); return false;">[x]</a></div>
     <div>Some static text here.</div>
     <div>Bring me <a href="#" onclick="showPopup(); return false;">back</a> my popup!</div>
</body>
</html>

回复收藏 0 原文