Auto-close pop-up after X seconds

Auto-close pop-up

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.



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"]
  1. 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 => === modalClassName)
  if ( !modal ) return
  let openButton = document.querySelector('.' + openButtonClassName)
  if ( openButton ) openButton.addEventListener('click', 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'
    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 '))
    modal.element.appendChild(wrapper) = '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.



Bounce Rate


Announcments, Promotions, Welcome


Geolocation, New & Returning Visitors, Start and End Date

Realated templates and examples