Modal JavaScript Help

Design help Custom code
1

Hello everyone!

I’ve been working on my clothing website recently. Implementing a newsletter popup and connecting it to MailChimp was somewhat easy.

My problem now is I’m trying to use javascript to set a few cookie rules:

  • If the user exits the modal without signing up five times, it will stop appearing for some time; I think the code has 30 in it.

  • If they have already signed up, the modal hides. I believe this resets after a year.

Here’s my code:

<script>
var closeCountCookieName = 'modalCloseCount'; // Cookie to store close count
var modalClosedCookieName = 'modalClosed'; // Cookie to prevent modal reappearance
var inactivityThreshold = 30 * 24 * 60 * 60; // 30 days in seconds

// Get the close count from the cookie
var closeCount = Cookies.get(closeCountCookieName) || 0; // Default to 0 if cookie doesn't exist

// Get the current timestamp
var currentTime = Math.floor(Date.now() / 1000);

// Check the modal closed cookie (user signed up)
if (Cookies.get(modalClosedCookieName) !== undefined) {
  // If it exists, hide the modal
  $('.modal-nl').hide(); // Replace '.modal' with your modal element class name
} else {
  // Check for close count cookie expiration (inactivity)
  var closeCountCookie = Cookies.get(closeCountCookieName);
  if (closeCountCookie && currentTime - parseInt(closeCountCookie.split(',')[1]) > inactivityThreshold) {
    // Reset close count if cookie is expired (inactive for 30 days)
    closeCount = 0;
    Cookies.set(closeCountCookieName, closeCount, { expires: 30 }); // Reset and set to expire in 30 days
  }

  // Show the modal normally (Webflow handles showing the modal)

  // Add a click event listener to the modal close button
  $('.overlay-brix-close, .close-popup-type, .close-popup-brix’).click(function() {
    // Increment the close count
    closeCount++;

    // Set the close count cookie
    Cookies.set(closeCountCookieName, closeCount + ',' + currentTime, { expires: 30 }); // Expires in 30 days and stores timestamp

    // Check if close count is 5
    if (closeCount >= 5) {
      // Set the modal closed cookie to prevent reappearance
      Cookies.set(modalClosedCookieName, 'ok', { expires: 365 }); // Expires in a year
      // Hide the modal
      $('.modal-nl').hide();
    }
  });
}
</script>

Here are some screenshots. I wasn’t sure if I needed to put them within the designer > Home > little gear (settings) > custom code or the overall Page Settings from within the Dashboard

Screenshot 2024-07-04 at 8.55.27 AM
Screenshot 2024-07-04 at 8.55.27 AM1920×1739 173 KB

Screenshot 2024-07-04 at 8.56.45 AM
Screenshot 2024-07-04 at 8.56.45 AM936×1326 112 KB

While trying to test it, I exited the modal, refreshed it five times, and tried signing up. But it would still reappear when I would return.

Please help. Thank you all in advance!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

hi @Nathan_James I’m not familiar with jQuery syntax but when saw your code I didn’t like how you are adding click listener.

According to click event | jQuery API Documentation your syntax to add click event listener is not correct.

I see you are using for this simple task an external library so I do not know how they refer to click listeners maybe they have their own syntactic sugar but I don’t think so. You should refer to jQuery and CookiesJS documentation to see where issues can be.

example of add click event according to jquery docs

  $('.overlay-brix-close, .close-popup-type, .close-popup-brix').on('click', function() {
      // do stuff
  });

But before you do any changes you should check your console if click count works as expected but IMO it would not.

3

Hey @Stan, thanks for getting back to me. This is my first time using JS so it’s all new to me. I got this code from Google Gemini, so I’m sure it is out of wack.

I will try your solution and get back to you. Thanks again.