JavaScript モーダルを表示する

Question

JavaScript初心者です。

ゲームのカウンターがゼロになったら、
モーダルにメッセージを表示させたいです。

色々とサンプルコードを探しているのですが、
ボタンクリックするとモーダルが開くサンプルコードばかりで、
私は、ボタンクリックしないで、そのタイミングが来たらモーダルを表示させたいです。

下記行をどのように書き換えたら良いかアドバイスいただけますと幸いです。

open.addEventListener('click',()=>{

'use strict'
 
{
	const open = document.getElementById('open');
	const close = document.getElementById('close');
	const modal = document.getElementById('modal');
	const mask = document.getElementById('mask');
	
	open.addEventListener('click',()=>{
		modal.classList.remove('hidden');
		mask.classList.remove('hidden');
	});
	
	close.addEventListener('click',()=>{
		modal.classList.add('hidden');
		mask.classList.add('hidden');
	});
	
	mask.addEventListener('click',()=>{
		close.click();
	});
}

サンプルコードの参照元
https://ullu-egg.com/javascript/modalwindow/

Comments

[m.ts10806]

「カウンタがゼロになったら」というコードがどこにもないまま、
単純に参照先のコードだけを提示されても何とも言えない部分はあり、
となると、自身が今書いてるコードをきちんと理解しているかどうか疑わしくなってきます。
1行1行理解しているか？説明できるか？というところから始めないと
何をするにも赤の他人に聞かなければならなくなるので、何も進まないと思います。

[hiro_ike]

ご指摘ありがとうございます。
色々理解できておらず、どこまでの情報を書く必要があるのかが正しく認識できておらず、読み手の方に余計にご負担かけて申し訳ないです。

Answer 1

open.addEventListener('click',()=>{　　
　modal.classList.remove('hidden');
　mask.classList.remove('hidden');
});

クリックしたら、モーダルを表示するという処理がここに記載されています
具体的には

open.addEventListener('click',()=>{　　// クリックしたら
　modal.classList.remove('hidden');　　// モーダルを表示する
　mask.classList.remove('hidden');
});

という具合です
なので、

if(カウントが0の条件式) {
　modal.classList.remove('hidden');
　mask.classList.remove('hidden');

}

という感じかと思います

Comments

[hiro_ike]

ありがとうございました。ご回答通り下記のようにしてモーダル状態にまで行けました。
ここからモーダル上に文字が表示できるよう追記していきます。

startCounters() {
this.timer = setInterval(() => {
this.updateStatsOnDom();
this.time--;
if (this.time < 0) {
this.stopTimer();
bgmOn.pause();
if (player.power >= 101) {
winnerOn.play();
modal.classList.remove('hidden');
mask.classList.remove('hidden');
// alert('You Won!');
} else {
looserOn.play();
// alert('You lost!');
}
}
}, 1000);
}