Javascript 弹出窗口不再显示在网页上

Question

所以我有一个最初显示在每个网页上的弹出窗口。经过一些修改，包括使用 cookie 来停止每次 session 加载网页，弹出窗口不再显示。我不明白为什么，经过广泛的测试、研究并直接寻求帮助后，我得出的结论是我对这个问题的理解不够。

如果有人能够帮助我理解为什么它不起作用并提供解决方案。

<div id='popup' style="display:none">
        <div class='cnt223'>
            <h1>Important Notice</h1>
            <p>
                Test!
                <br />
                <br />
                <a href='' class='close' style="color:green">OK</a>
                <a href='' class='goBack' style="color:red">KO</a>
            </p>
        </div>
    </div>
    <script>
        function setCookie(cname, cvalue) {
            window.document.cookie = cname + "=" + cvalue;
        }

        function getCookie(cname) {
            var ca = decodeURIComponent(document.cookie).split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim().split('=');
                if (cname == c[0] && c.length > 1) {
                    return c[1];
                }
            }
            return "";
        }

        function checkCookie() {
            if (getCookie("ageverification") == "") {
                $('#popup').show();
                $('#popup a.close').click(function ( event ) {
                    event.preventDefault();
                    $('#popup').hide();
                    setCookie("ageverification", 'true');
                });
                $('#popup a.goBack').click(function ( event ) {
                    event.preventDefault();
                    goBack();
                });
            } else {
                return null;
            }
        }

        function goBack() {
            window.history.go(-2);
        }
        checkCookie();

CSS“这只是现在在同一个 HTML 页面上”

<style type="text/css">
    #overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        filter:alpha(opacity=70);
        -moz-opacity:0.7;
        -khtml-opacity: 0.7;
        opacity: 0.7;
        z-index: 100;
        display: none;
    }
    .cnt223 a{
        text-decoration: none;
    }
    .popup{
        width: 100%;
        margin: 0 auto;
        display: none;
        position: fixed;
        z-index: 101;
    }
    .cnt223{
        min-width: 600px;
        width: 600px;
        min-height: 150px;
        margin: 100px auto;
        background: #f3f3f3;
        position: relative;
        z-index: 103;
        padding: 15px 35px;
        border-radius: 5px;
        box-shadow: 0 2px 5px #000;
    }
    .cnt223 p{
        clear: both;
        color: #555555;
        /* text-align: justify; */
        font-size: 20px;
        font-family: sans-serif;
    }
    .cnt223 p a{
        color: #d91900;
        font-weight: bold;
    }
    .cnt223 .x{
        float: right;
        height: 35px;
        left: 22px;
        position: relative;
        top: -25px;
        width: 34px;
    }
    .cnt223 .x:hover{
        cursor: pointer;
    }
</style>

Answer 1

id 为“popup”的元素是否嵌套在 id 为“overlay”的元素(的子元素)中？如果是，id 为“overlay”的元素有 display:none; ，这意味着弹出窗口可能正在显示，但它的父级不是。尝试替换:

$('#popup').show();

与:

$('#popup, #overlay').show();

另一个问题可能是 Javascript 在浏览器将 ID 为“popup”的元素添加到它的 DOM 之前执行。尝试替换:

checkCookie();

与:

$(function () { checkCookie(); });