Auto-close pop-up after X seconds

In this step-by-step guide, we will walk you through the process of automatically closing an If-So pop-up after a specified number of seconds.

By default, a countdown will appear above the pop-up’s content to indicate when it will be closed. However, if you prefer, you can adjust the position of the countdown and incorporate it into the main content of the pop-up instead.

Example:

Step-by-step: How to set up an auto-close pop-up

1. Make sure you have both If-So and the Trigger Events extension installed on your website.
2. Create a new If-So trigger and set it up as a pop-up on your site.
3. Add the parameter “classname=’auto-close'” to the trigger shortcode. For example:

[ifso id="111" ajax="yes" display="modal" classname="auto-close"]

4. Insert the following script on your website or page (How to add a script to my site?).
   
   This script will automatically close the pop-up after 5 seconds. You can customize the value of the variable “secondsToClose” in line 3 to set a different time.

document.addEventListener('ifso_modal_initialized', function () {
  let modalClassName = 'auto-close'
  let secondsToClose = 5
  let doCountdown = true
  let countdownClassName = 'auto-close-countdown'
  let openButtonClassName = 'auto-close-open-button'

  let modals = window.ifso_initialized_modals
  if ( !modals ) return
  let modal = modals.find(mod => mod.id === modalClassName)
  if ( !modal ) return
  let openButton = document.querySelector('.' + openButtonClassName)
  if ( openButton ) openButton.addEventListener('click', countToClose)
  countToClose()

  function countToClose() {
    if ( doCountdown ) initCountdown()
    setTimeout(() => { modal.closeModal() }, secondsToClose * 1000)
  }

  function initCountdown() {
    let countdown = document.querySelector('.' + countdownClassName)
    if ( !countdown ) countdown = createModalCountdown()
    countRecoursion(countdown, secondsToClose)
    function countRecoursion(countdown, seconds) {
      countdown.innerHTML = seconds + ''
      if ( seconds <= 0 ) return
      setTimeout(() => { countRecoursion(countdown, seconds - 1) }, 1000)
    } 
  }

  function createModalCountdown() {
    let wrapper = document.createElement('p')
    wrapper.className = 'auto-close-countdown-wrapper'
    let countdown = document.createElement('span')
    countdown.className = 'auto-close-countdown'
    countdown.appendChild(document.createTextNode(secondsToClose))
    let style = document.createElement('style')
    style.innerHTML = `
      .auto-close-countdown-wrapper {
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        text-align: center;
        color: white;
        font-size: 18px;
        font-family: 600;
        font-family: 'Open Sans', sans-serif;
        margin: 0 auto 10px;
      }
      .auto-close-countdown {
        color: inherit
      }
    `
    wrapper.appendChild(document.createTextNode('Closing in '))
    wrapper.appendChild(countdown)
    wrapper.appendChild(style)
    modal.element.appendChild(wrapper)
    modal.element.style.overflow = 'visible'
    return countdown
  }
})

*If you are using the “open on click” option to trigger the pop-up with a button, make sure to replace the “openButtonClassName” parameter in line 6 with the class name of the element that you are using to open the pop-up.

Extra options

If you want to customize the auto-close pop-up further, here are some additional options:

Disable the countdown: Change the value of the “doCountdown” parameter in line 4 from “true” to “false”.

Change the countdown position: add the class name “auto-close-countdown” to any element inside your pop-up. The script will then display the countdown wherever that element is positioned and remove it from its default position.