CSS HTML Javascript

マスクとモーダルを表示する

「詳細を見る」ボタンにclickイベントを設定して、クリックしたらマスクとモーダルが現れるようにします。

  • clickイベントの設定
  • hiddenクラスの付け外し

clickイベントの設定

・ではJavaScriptの続きを書いていきましょう。前回までで要素の取得が終わったので次はボタンをクリックしたら背景とモーダルウィンドウを表示するようにしていきましょう。

要素を取得しよう

・全体の流れとしてはopen, close, maskにそれぞれクリックしたらhiddenを外すかつけるという命令を書いていきます。

・まずはopenに対してクリックしたらhiddenを外していく命令を書いていきます。

・ではどこに対してのイベントかを書いていきます。openに対してaddEvenrListenerを指定してクリックしたときにイベントを発生させたいのでclickとし、アロー関数とつなげていきます。

・こんな感じですね。

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

・中身はmodalとmaskのhiddenを外したいのでremoveを使ってあげましょう。

・こんな感じです

modal.classList.remove('hidden');

mask.classList.remove('hidden');

});

・これでボタンをクリックをしたらhiddenを外してくれます。

hiddenクラスの付け外し

・同様にcloseを押したらhiddenをつける命令もしていきます。

・closeに対してaddEventListenerを指定しclickしたらと書いていきます。

・こんな感じ

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

・その中にmodalとmaskにhiddenをつけると書いていきます。

・こんな感じ

modal.classList.add('hidden');

mask.classList.add('hidden');

});

・最後に背景をクリックしてもモーダルウィンドウを閉じたいのでcloseと同様の内容をmaskに対しても書いていきます。

・ただこれでも問題なく動きますがもっと短く書くためにcloseと同じ内容で処理する方法もあります。その場合単にclose.click();と書いてあげるだけでいいのでこちらの方が簡単です。

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

    close.click();

});

と書いてあげればいいでしょう。

-CSS, HTML, Javascript