Modal only once per session

Attributes
1

Hi there!

I am using the Accessible Modal in my client’s website for a newsletter pop up once the website is loaded. Is it possible to have it display only once per session? Thank you!

2

Hey @anasilveira! This is not possible natively but we could add some JS to either set a cookie or a flag in the localStorage to show this modal.

How would you like to proceed?

3

Thank you @Support-Luis !! I think a JS with a cookie would be perfect. Is this something you could help me with?

4

Sure! Can you please share a link to the page? I will give this a go :slight_smile:

5

Hi @Support-Luis , my apologies for the delay! Here’s the link: Webflow - HTFG

I added the pop up with the loading animation, both of them can show only once per session if possible. Thank you so much for your help!!

6

Hi @Support-Luis ! Just checking in if you got a chance to review the site? Thank you so much for your help!!

7

Hey @anasilveira! Yes! I was chasing a bug where the modal opened even without a script added to the head and just realized you have an interaction that opens the modal after the loading element.

Can we remove this interaction? I can include the showing of the modal after the loader is removed in the code :slight_smile:

8

Hi @Support-Luis ! Absolutely!! Now removed :slight_smile:

9

Thank you!

Can you please test this code?

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'modal',
    (modalInstances) => {
      console.log('Modal successfully loaded!');

      // Function to set a session cookie
      function setCookie(name, value) {
        document.cookie = `${name}=${value};path=/`;
      }

      // Function to get a cookie value by name
      function getCookie(name) {
        const cookies = document.cookie.split(';');
        for (let cookie of cookies) {
          const [cookieName, cookieValue] = cookie.split('=');
          if (cookieName.trim() === name) {
            return cookieValue.trim();
          }
        }
        return null;
      }

      // Function to show the modal
      function showModal() {
        console.log('Displaying modal');
        const modal = document.querySelector('.fs_modal-2_popup');
        const loader = document.querySelector('.page-loader_wrapper');

        if (!loader || !modal) {
          console.error('Required elements not found');
          return;
        }

        // Add an event listener to detect when the loader has been hidden
        const loaderObserver = new MutationObserver((mutationsList, observer) => {
          for (let mutation of mutationsList) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
              if (loader.style.opacity === '0') {
                console.log('Loader has been hidden');
                document.querySelector('[fs-modal-element="open"]').click();
                observer.disconnect(); // Stop observing after the loader has been hidden
              }
            }
          }
        });

        loaderObserver.observe(loader, { attributes: true });

        // Add an event listener to detect when the modal is closed
        const modalObserver = new MutationObserver((mutationsList, observer) => {
          for (let mutation of mutationsList) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
              if (modal.style.display === 'none') {
                console.log('Modal has been hidden');
                // Set the session cookie to indicate the modal has been shown and closed
                setCookie('modalDisplayed', 'true');
                observer.disconnect(); // Stop observing after the modal is closed
              }
            }
          }
        });

        modalObserver.observe(modal, { attributes: true });
      }

      const modalDisplayed = getCookie('modalDisplayed');
      if (!modalDisplayed) {
        showModal();
      } else {
        console.log('Modal has already been displayed in this session.');
      }
    },
  ]);
</script>
1 Like