Question

因此，我有一个最初显示在每个网页上的弹出窗口。进行一些修改（包括使用cookie来停止在每个会话中加载网页）后，不再显示弹出窗口。我不知道为什么，经过广泛的测试，研究和直接寻求帮助后，我得出的结论是，我对该主题没有足够的了解。

如果任何人都可以帮助我了解为什么它不起作用，并提供解决方案。

<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

标识为“ popup”的元素是否嵌套在标识为“ overlay”的元素（的子元素）中？如果是，则标识为“ overlay”的元素显示为：none; ，这意味着可能会显示弹出窗口，但不会显示其父窗口。尝试更换：

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

具有：

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

另一个问题可能是在浏览器向其DOM添加ID为“ popup”的元素之前执行了Javascript。尝试更换：

checkCookie();

具有：

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

网页上不再显示JavaScript弹出窗口

1 个答案: