Auto-close pop-up after X seconds

In this step-by-step guide, we will guide you through the steps of closing an If-So pop-up automatically after X seconds.

By default, a countdown will be displayed above the pop-up’s content to show when it will be closed. If you want, you can change the countdown’s position and integrate it inside the pop-up’s main content 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.
2. Create a new If-So trigger and apply it to the site as a pop-up.
3. Add the parameter classname=”auto-close” to the trigger shortcode. Example:

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

4. Add the following script to your site or page (How to add a script to my site?).
   
   The script will close the pop-up after 5 seconds. You can change the value of the variable “secondsToClose” in line 3 if you want 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
  }
})

Extra options

Disable the countdown: Change 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 above checks whether your pop-up has an element with the class name ‘auto-close-countdown’. If it does, it displays the countdown wherever the element is positioned and removes the countdown from its default position.