时间戳

首页 > 解决方案 > 隐藏的 div 会阻止网站上的内容

javascript - 隐藏的 div 会阻止网站上的内容

问题描述

我的网站上有一个 cookie 同意功能，但即使它隐藏了，它也会以某种方式阻止它背后的链接。如何使同意窗口不阻止后面的链接。我有两种情况需要处理：1）用户接受/拒绝同意，div 消失但仍然阻止内容 2）用户在进入网站时已经同意。div 不可见，但会阻止内容。

同意 DIV：

    <div class="fixed-bottom p-4">
    <div class="toast bg-dark text-white w-100 mw-100" role="alert" data-autohide="false">
        <div class="toast-body p-4 d-flex flex-column">
            <h4>Cookie Warning</h4>
            <p>
                This website stores data such as cookies to enable site functionality including analytics and personalization. By using this website, you automatically accept that we use cookies.
                Read more about our cookies <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Cookies">HERE</a>
            </p>
            <div class="ml-auto">
                <button type="button" class="btn btn-outline-light mr-3" id="btnDeny">
                    Deny
                </button>
                <button type="button" class="btn btn-light" id="btnAccept">
                    Accept
                </button>
            </div>
        </div>
    </div>
</div>

JS。脚本

function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

function cookieConsent() {
    if (!getCookie('allowCookies')) {
        $('.toast').toast('show')
    }
}

try {
    $('#btnDeny').click(() => {
        eraseCookie('allowCookies')
        $('.toast').toast('hide')
    })
}
catch (err) {
    // Ignore
}

try {
    $('#btnAccept').click(() => {
        setCookie('allowCookies', '1', 7)
        $('.toast').toast('hide')
    })
}
catch (err) {
    // Ignore
}




// load
cookieConsent()

标签： javascriptcss

解决方案

在 Chat 中进行一些调试后，我们发现了潜在的问题：设置 cookie 后，toast 消息被丢弃，但它周围的容器 -<div class="fixed-bottom p-4">从未被删除，并且在底层内容上不可见。解决方案是在检查 cookie 或设置 cookie 时也将其隐藏：

$('.toast').toast('hide');
$('.toast').parent().hide();

推荐阅读