Automatically close a 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’s going to be closed. If you want to, you can change the countdown’s position and integrate it inside the pop-up’s main content instead.

Example:

See it in action


Step-by-step: How to make an If-So Pop-up that closes after X seconds

  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"]
  1. Add the following script to your site or your 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 modals = window.ifso_initialized_modals
  if ( !modals ) return
  let modal = modals.find(mod => mod.id === modalClassName)
  if ( !modal ) return

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


  function initCountdown(countdownClassName, seconds) {
    let countdown = document.getElementsByClassName(countdownClassName)[0]
    if ( !countdown ) countdown = createModalCountdown(modal, secondsToClose)
    countToModalClose(countdown, seconds)
    
    function countToModalClose(countdown, seconds) {
      countdown.innerHTML = seconds + ''
      if ( seconds <= 0 ) return
      setTimeout(function() { countToModalClose(countdown, seconds - 1) }, 1000)
    } 
  }

  function createModalCountdown(modal, seconds) {
    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(seconds))
    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 displayed the countdown wherever the element is positioned and removes the countdown from its default position.

Close pop-up after X seconds

Categories

Goal

Bounce Rate

Topic

Welcome

Realated templates and examples