CODEWITHSUNDEEP
javascriptcss
Daniel Björk
Daniel Björk

Reputation: 2507

Hidden div blocks content on site

I have a cookie consent function on my site but even when its hidden its somehow blocking the links behind it. How do I make the consent window not to block the links behind. I have two cases that needs to be handled: 1) User accepts/denies the Consent, the div disappears but is still blocking content 2) User has already given consent when entering the site. The div is not visible but is blocking the content.

Consent DIVs:

    <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. Script

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()

Upvotes: 0

Views: 209

Answers (2)

SaschaM78
SaschaM78

Reputation: 4497

After a bit of debugging in Chat we found the underlying problem: after the cookie got set the toast message got discarded but the container around it - <div class="fixed-bottom p-4"> never got removed and remained invisibly over the underlying content. The solution was to hide it as well when checking for a cookie or setting the cookie:

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

Upvotes: 1

Dan Knights
Dan Knights

Reputation: 8368

In your CSS, try setting pointer-events: none; on the outer div and pointer-events: all; on any inner-elements that you want to be interactive. Not sure if that's what you're after but hopefully it helps.

Upvotes: 0

Related Questions