在倒计时结束时关闭模态

Question

我有一个倒数计时器，其工作方式如下

//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);

我有一个关闭模态的当前函数。

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

我希望在倒计时结束时运行但我无法将它合并到 // 如果达到日期部分。

Answer 1

如果我正确理解你的问题，你可以添加一些 js 来向你的模态添加新的 class。

     // 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;
    }

在倒计时结束时关闭模态

On countdown end close modal

javascript

simplemodal

modal-dialog