You Can Schedule Modal Popups using Javascript

The code above was working fine during the period when the modal was intended to be active. But, when the expiration time came, I found that the code was actually blocking the proper scrolling of the webpage. It was almost as if the popup was still appearing, but there was no way to close it (because the popup was not being displayed).

After some work, I have found a solution that appears to work. So, here is the REVISED code for scheduling modal popups in Nicepage.

(begin-script tag)
document.addEventListener('DOMContentLoaded', (event) => {

const elementId = 'myModalId'; // Change this to your modal element ID

// Define the start and end times for the modal popup
const startTime = new Date('2024-12-16T02:45:00'); // example Start time
const endTime = new Date('2025-01-01T21:01:00'); // example End time

// Function to check if the current time is within the defined period
function isWithinSchedule() {
    const now = new Date();
    return now >= startTime && now <= endTime;
}

// Function to clean up any event listeners or intervals
function cleanup() {
    const closeButton = document.querySelector(`#${elementId} .u-dialog-close-button`);
    if (closeButton) {
        closeButton.removeEventListener('click', closeModal);
    }
    clearInterval(toggleInterval);


    // Remove modal and overlay from the document
    const modal = document.getElementById(elementId);
    if (modal) {
        modal.parentNode.removeChild(modal);
    }
    const overlay = document.querySelector('.u-dialog-block');
    if (overlay) {
        overlay.parentNode.removeChild(overlay);
    }
}

// Variable to hold the interval reference
let toggleInterval;

// Function to show or hide the modal based on the schedule
function manageModal() {
    const modal = document.getElementById(elementId);
    if (modal) {
        if (isWithinSchedule()) {
            // Allow the original program to handle modal display
        } else {
            modal.style.display = 'none';
        }
    }
}

// Function to handle the close button
function closeModal() {
    const modal = document.getElementById(elementId);
    if (modal) {
        modal.style.display = 'none';
    }
}

// Function to detect when the modal is displayed on screen
function observeModal() {
    const modal = document.getElementById(elementId);
    if (modal) {
        const observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (mutation.attributeName === 'style' && modal.style.display === 'block') {
                    // Modal appeared on screen
                }
            });
        });
        observer.observe(modal, { attributes: true });
    }
}

// Initial check for schedule and modal element
if (isWithinSchedule()) {
    const modal = document.getElementById(elementId);
    if (modal) {
        // Add event listener to the close button
        const closeButton = document.querySelector(`#${elementId} .u-dialog-close-button`);
        if (closeButton) {
            closeButton.addEventListener('click', closeModal);
        }

        // Call the function to manage the modal state
        manageModal();

        // Observe the modal to detect when it appears
        observeModal();

        // Update the modal state every minute and close it if the end time is reached
        toggleInterval = setInterval(() => {
            if (!isWithinSchedule()) {
                closeModal();
                cleanup(); // Ensure cleanup is called after closing the modal
            } else {
                observeModal(); // Re-observe the modal appearance
            }
        }, 60000);
    } else {
        cleanup();
    }
} else {
    cleanup();
}

});
(end-script tag)

Last edited 29 January 2025 by jack.from.canada

Hi Jack,

Thanks for sharing. I hope it could help other users.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp