On countdown end close modal

Question

I have a countdown timer that works as follows

//countdown
const countdown = document.querySelector('.countdown');

// Set Launch Date (ms)
const launchDate = new Date('June 29, 2020 09:26:00').getTime();

// Update every second
const intvl = setInterval(() => {
// Get todays date and time (ms)
const now = new Date().getTime();

// Distance from now and the launch date (ms)
const distance = launchDate - now;

// Time calculation
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const mins = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Display result
countdown.innerHTML = `
<div>${days}<span>Days</span></div> 
<div>${hours}<span>Hours</span></div>
<div>${mins}<span>Minutes</span></div>
<div>${seconds}<span>Seconds</span></div>
`;

// If launch date is reached
if (distance < 0) {
// Stop countdown
clearInterval(intvl);
// Style and output text
countdown.style.color = '#17a2b8';
countdown.innerHTML = 'Launched!';
}
}, 1000);

I have a current function that closes a modal here.

$(".modalDialogload").css({"opacity":"0","pointer-events":"none"});
}, 2000);

I want this to run when the countdown finishes but Im having trouble incorporating it within the // If date is reached section.

Answer 1

If I understand your question correctly you could add bit of js to add new class to your modal.

     // If launch date is reached
        if (distance < 0) {
        // Stop countdown
        clearInterval(intvl);
        // Style and output text
        countdown.style.color = '#17a2b8';
        cou

ntdown.innerHTML = 'Launched!';
     // Add this line
        
let modal = document.querySelector('.modalDialogload');
modal.classList.add('HideModalClass');  
     // End
            }
    
    .HideModalClass{
    opacity: 0;
    pointer-events:none;
    display:none;
    }