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
- Make sure you have both If-So and the Trigger Events extension installed.
- Create a new If-So trigger and apply it to the site as a pop-up.
- Add the parameter classname=”auto-close” to the trigger shortcode. Example:
[ifso id="111" ajax="yes" display="modal" classname="auto-close"]
- 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.