I use modal popups to make announcements on standard HTML sites created with Nicepage. When I use Nicepage to create WordPress themes, there are plugins that can be used to "schedule" when a popup can be active, and when it should be deactivated (i.e. after an event has been completed). But for a standard HTML website, Nicepage has no such native functionality.

Experimenting with AI, I was able to create a Javascript solution that will allow Nicepage projects to define popups which will not only be displayed on the specified pages and after a specified delay; but will also allow them to be automatically activated and deactivated based on a required start/end schedule.

If you need this functionality now, this guide should give you some direction on how to implement it yourself. Nicepage already supports giving a custom ID to the Modal Popup (usually a self-generated ID beginning with "carousel_", but it can be user-specified).

In the code below, you will see a reference to startTime, endTime and the string myModalId (where myModalId would be replaced by your popup's actual modal popup ID).

The Javascript code below should be added to an HTML element within your project.

===================================

<script>

document.addEventListener('DOMContentLoaded', (event) => {

// Define the start and end times for the modal popup
const startTime = new Date('2024-11-18T00:00:00'); // example Start time
const endTime = new Date('2024-11-19T00:00:00'); // example End time
let initialCheckDone = false;

// 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 show or hide the modal based on the schedule
function toggleModal(initialCheck = false) {

const modal = document.getElementById('myModalId');
if (modal) {
    if (isWithinSchedule()) {
        if (initialCheck || (!initialCheck && modal.style.display === 'none')) {
            modal.style.display = 'block';
        }
    } else {
        modal.style.display = 'none';
    }
} else {
    console.error('Modal element with ID "myModalId" not found');
}

}

// Function to handle the close button
function closeModal() {

const modal = document.getElementById('myModalId');
if (modal) {
    modal.style.display = 'none';
}

}

// Add event listener to the close button
const closeButton = document.querySelector('#myModalId .u-dialog-close-button');
if (closeButton) {

closeButton.addEventListener('click', closeModal);

} else {

console.error('Close button not found within the modal');

}

// Call the function to set the initial state of the modal
toggleModal(true);
initialCheckDone = true;

// Optional: Update the modal state every minute without changing it if already closed
setInterval(() => {

if (!initialCheckDone) {
    toggleModal(false);
}

}, 60000);

});

(end-script tag)

===================================

Please feel free to use this method for a quick way to implement scheduled modal popups.

I use modal popups to make announcements on standard HTML sites created with Nicepage. When I use Nicepage to create WordPress themes, there are plugins that can be used to "schedule" when a popup can be active, and when it should be deactivated (i.e. after an event has been completed). But for a standard HTML website, Nicepage has no such native functionality. Experimenting with AI, I was able to create a Javascript solution that will allow Nicepage projects to define popups which will not only be displayed on the specified pages and after a specified delay; but will also allow them to be automatically activated and deactivated based on a required start/end schedule. If you need this functionality now, this guide should give you some direction on how to implement it yourself. Nicepage already supports giving a custom ID to the Modal Popup (usually a self-generated ID beginning with "carousel_", but it can be user-specified). In the code below, you will see a reference to **startTime**, **endTime** and the string **myModalId** (where myModalId would be replaced by your popup's actual modal popup ID). The Javascript code below should be added to an HTML element within your project. =================================== <script> document.addEventListener('DOMContentLoaded', (event) => { // Define the start and end times for the modal popup const startTime = new Date('2024-11-18T00:00:00'); // example Start time const endTime = new Date('2024-11-19T00:00:00'); // example End time let initialCheckDone = false; // 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 show or hide the modal based on the schedule function toggleModal(initialCheck = false) { const modal = document.getElementById('myModalId'); if (modal) { if (isWithinSchedule()) { if (initialCheck || (!initialCheck && modal.style.display === 'none')) { modal.style.display = 'block'; } } else { modal.style.display = 'none'; } } else { console.error('Modal element with ID "myModalId" not found'); } } // Function to handle the close button function closeModal() { const modal = document.getElementById('myModalId'); if (modal) { modal.style.display = 'none'; } } // Add event listener to the close button const closeButton = document.querySelector('#myModalId .u-dialog-close-button'); if (closeButton) { closeButton.addEventListener('click', closeModal); } else { console.error('Close button not found within the modal'); } // Call the function to set the initial state of the modal toggleModal(true); initialCheckDone = true; // Optional: Update the modal state every minute without changing it if already closed setInterval(() => { if (!initialCheckDone) { toggleModal(false); } }, 60000); }); (end-script tag) =================================== Please feel free to use this method for a quick way to implement scheduled modal popups.

Last edited 2 weeks ago by jack.from.canada