<aside> 👋🏻 First of all, let me introduce myself.

I'm Jordi Espinosa. At home they call me Jordi, but everyone calls me Espinosa (Yes, there are too many Jordi's in Catalonia, and we have to make do as best we can).

Hope you find it useful! Folllow for more!

https://www.jordiespinosa.me/

</aside>

1. Importing the library

Add the following code to your <head> in your page settings.

<aside> ⚠️ This code has to go in <head>.

</aside>

<script src="<https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js>"></script>

2. Creating the cookie

Add the following code to an embed component. This will create the cookie.

<script>
document.addEventListener("DOMContentLoaded", function(event) { 
  var modalCookie = 'modalClosed';
  
  if(typeof Cookies.get(modalCookie) !== 'undefined') $('.component-name').remove();
  $('.close1, .close2').click(function() {
    Cookies.set(modalCookie, 1, { expires: 1 });
  });

});

</script>

.component-name → This is the name of the whole component wrapper.

In this case, we have 2 elements (cose1 & close2), this is because we have 2 elements that will make our modal close:

.close1 → .close-overlay

.close2 → .popup-overlay

Change the vallues “close1” and “close2” according to your elements. In my case, the first element that will make the modal close is the icon, that has a class applied “close-overlay”.

And the second element, the overlay itself. Therefore → “popup-overlay”.