存在cookie时隐藏div元素

Question

I am trying to hide a popup that keeps appearing everytime a page is loaded. The plugin is not working out of the box.

Our site is: https://www.prikkabelled.nl/

A cookie is loaded into the browser after the user reads the popup message. The cookie is called pum-10366 with its value set to true.

So if the cookie is present with indexOf > -1, I don't want that popup to appear anymore.

This is what I've got so far:

jQuery( document ).ready(function() {
        if (document.cookie.indexOf("pum-10366") !== -1) {
           jQuery('#pum-10366').css('display', 'none !important');
        }
});

The pum element is that large popup that displays once. Any suggestions?

Answer 1

To fix this you need to remove the !important tag as jQuery doesn't understand it, therefore it's stopping the display from working:

jQuery( document ).ready(function() {
    if (document.cookie.indexOf("pum-10366") !== -1) {
       jQuery('#pum-10366').css('display', 'none');
    }
});

If you did need to include the !important tag for a reason you could toggle as class with importance already on:

CSS

  .important { display: none !important; }

JQUERY

jQuery("#pum-10366").toggleClass("important");