Here is how to add cookies to a custom modal

Community resources Webflow Tips
1

Find the full code here:

<script>
var cookieName = 'modalClosed';

if(typeof Cookies.get(cookieName) !== 'undefined') {
$('.modal').remove();
}

$('.close-modal-bg, .close-modal').on('click', function(){
Cookies.set(cookieName, 'ok', { expires: 7 });
})
</script>

Here is how to create a custom modal:

6 Likes
2

I’m not sure why mine isn’t working. I copied directly from the code provided and followed your instruction very closely. I’m stumped.

https://preview.webflow.com/preview/thelovelylittleshoptemp?utm_medium=preview_link&utm_source=dashboard&utm_content=thelovelylittleshoptemp&preview=b27294c0e392d8e89b9de7275276bcff&mode=preview

3

hello,

Thank you so much for sharing this video, it helped me alot

Thanks and regards.:slight_smile:

1 Like
4

all classnames in the code should be lowercase. The reason why is because when Webflow publishes your code, they remove spaces, dashes and capital letters from class names.

Hope this helps :slight_smile:

1 Like
5

That was it, thanks.

1 Like
6

Same here mikesellr - can’t for the life of me get this to work - my modal just keeps opening every time i refresh, try different browser etc… you have any luck yet?

7

Mine was just that my classes had uppercase. Switched to lower case and issue was resolved.

8

Ah thanks for the fast reply! I tried that too but not solving it….

9

Please, share with us the read-only link for your website and the code that you are using for your website so we can help you

10

Thanks for the reply Jeandcc! I figured out! :wink:

1 Like
11

Quick correction to your list @PixelGeek- dashes are not replaced on publish and can be safely used as in class-name.

2 Likes
12

thanks for the correction :slight_smile:

13

how to save something-of-productlist shown in a div-block that i like on a website to a page with all products-i-like into a may-be-i-will-buy-list? for a-not-ecommerce site possible? for example I-like-old-buildings-site …

14

Hi Nelson,

Thanks for this super useful!

if I want the cookie to expire after 6 hours do I change the following
Cookies.set(cookieName, ‘ok’, { expires: 7 });
to
Cookies.set(cookieName, ‘ok’, { expires: .25 }); ?

Cheers
Grant

15

Check the link above that teaches how to provide something different than days for the expire section of the code

1 Like
16

Thanks!

So I’m going with:

var inSixHours = 0.25;
Cookies.set(cookieName, ‘ok’, { expires: inSixHours });

Cheers
Grant

1 Like
17

Thank you so much for sharing this! I have tried doing it and I am failing somewhere … probably the class names. Would you mind taking a look in my project:

https://preview.webflow.com/preview/newbaseline?utm_medium=preview_link&utm_source=designer&utm_content=newbaseline&preview=ff98f440853dfa7245da97d426477d31&pageId=5e763a90d25345df4594d593&mode=preview

The page with the modal (and the cookies) is called Blog. Thanks!

1 Like
18

Hey - this is working great. But is there a way i can hide the cookie box in the design mode, and have it display on the live site if there are no cookies accepted?

Hope that makes sense?
K

19

Kieran, you can use something like this:

<script>
var cookieName = 'modalClosed';

if(!Cookies.get(cookieName)) {
    $('.modal').remove();
} else {
    $('.modal').fadeIn();
}

$('.close-modal-bg, .close-modal').on('click', function(){
    Cookies.set(cookieName, 'ok', { expires: 7 });
})
</script>
1 Like
20

Great thanks Jean! Will try it out : ) My clients going to edit some of the content in the designer so this is ideal.

K

1 Like