トップへ戻る
BLOGS

JS 画面が暗くなって出てくるモーダルウィンドウ

JS 画面が暗くなって出てくるモーダルウィンドウ

今回はjavascriptを使用した

モーダルウィンドウの実装をHTMLやCSS,そしてJSの解説までして行こう思います

簡単な概要としては、

  • クリックされたらコンテンツを表示する
  • クリックされたらコンテンツを閉じる
  • コンテンツが出現するとともに画面を暗くする

こんな感じですね

サンプルHTML

ということではい。

index.html

<main>
    <h1>お問い合わせ</h1>
    <a id="modalOpen">問い合わせ</a>
    <div class="modal" id="modal">
      <h2>お問い合わせ</h2>
      <div class="modalContents">
        ここに内容が入ります<br>
        ここに内容が入ります<br>
        ここに内容が入ります<br>
        ここに内容が入ります<br>
        ここに内容が入ります<br>
        ここに内容が入ります
      </div>
      <a id="modalClose" class="modalClose">閉じる</a>
    </div>
    <div class="mask" id="mask"></div>
  </main>

HTMLとしてはシンプルに<a id=”modalOpen”>のタグをクリックされたら、その下のタグ、<div class=”modal” id=”modal”>にクラスを追加してそのクラスを使用して表示する

そしてその中にあるタグである<a id=”modalClose” class=”modalClose”>をクリックしたらそのクラスを削除して元の画面に戻す

さらに<div class=”mask” id=”mask”></div>にも同じ様にクラス付与を行い画面全体を覆うフィルターとして使用します

つぎにCSSです

マスクとコンテンツを非表示にする

style.css

#modalOpen,#modalClose{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 40px;
  background-color: blue;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
}

#modalClose {
  margin: 30px auto 0;
}
.modal {
  position:fixed;
  top: 50%;
  left: 50%;
  padding: 20px;
  border-radius: 5px;
  transform: translate(-50%,-50%) scale(.95);
  background-color: #fff;
  min-width: 500px;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  max-height: 80vh;
  overflow: auto;
}

.modal.active {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
  visibility: visible;
}
.modal h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.mask {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.mask.active {
  opacity: 0.7;
  visibility: visible;
}

ここでのポイントはコンテンツとマスクを非表示にしておくことです

opacity: 0;
visibility: hidden;

さらにz-indexを指定します、

通常画面のz-indexは0なので、それより上で画面を覆うマスクは「1」

その上に来るコンテンツは「2」にしておきます。

そしてそれぞれクラスactiveというクラスを持ったときのみ、

opacity: visibility: visible;を設定しておきます

JS クリックしたらクラスを操作する

index.js

document.getElementById("modalOpen").addEventListener("click",function() {
  document.getElementById("modal").classList.add("active");
  document.getElementById("mask").classList.add("active");
})
document.getElementById("modalClose").addEventListener("click",function() {
  document.getElementById("modal").classList.remove("active");
  document.getElementById("mask").classList.remove("active");
})

JavaScriptはクリックした時に作動するメソッド、

.addEventListenerを開閉するためのタグに仕込んでおき、

classListでクラスを操作しますaddは追加するということで

removeは削除という意味になります

これで先に設定したCSSのクラスの指定が効くようになります

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA