itsuna's blog

日々のアウトプットと備忘録

JavaScriptでモーダルをつくる

概要

最近ホームページを作る機会があり, モーダルを使用したので, その備忘録を...
タイルをクリックするとそのコンテンツが開かれるという単純なもの.

f:id:itsuna:20171207224705p:plain

考え方

section class="tile" をクリックしたときに, 以下の操作をJavaScriptに実行させ, タイルとモーダルを開く.

  1. div id="modal" のclass名を "modal-opened" に変え, モーダルをONにする.
  2. 押したタイルのdata-target属性を取得し, それと同じ名前のIDを持ったsection class="modal-content"のdisplayをblockにする.


div id="modal-opened"をクリックしたときに, 以下の操作をJavaScriptに実行させ, タイルとモーダルを閉める.

  1. div id="modal" のclass名を "modal-closed" に変え, モーダルをOFFにする.
  2. section class="modal-content" のdisplayをnoneにする.

ソースコード

HTML5 (modal_ex.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Modal Example</title>
<link rel="stylesheet" href="path/to/frame.css">
</head>
<body>
  <div id="modal" class="modal-closed">
  </div>
  <header></header>
  <main>
    <section data-target="tile1" class="tile">tile 1</section>
    <section id="tile1" class="modal-content">Content 1</section>
    <section data-target="tile2" class="tile">tile 2</section>
    <section id="tile2" class="modal-content">Content 2</section>
    <section data-target="tile3" class="tile">tile 3</section>
    <section id="tile3" class="modal-content">Content 3</section>
  </main>
  <footer></footer>
  <script src="path/to/modal.js"></script>
</body>
</html>
CSS3 (frame.css)
*{
  margin: 0;
  padding: 0;
}
html{
  font-family: helvetica;
  font-size: 16px;
  width: 100%;
  height: 100%;
}
div#modal{
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
  -webkit-animation: fadeEffect 0.3s;
  animation: fadeEffect 0.3s;
}
div#modal.modal-opened{
  display: block;
}
div#modal.modal-closed{
  display: none;
}
section.tile{
  display: block;
  float: left;
  width: 10rem;
  height: 4.0rem;
  line-height: 4.0rem;
  font-size: 1.2rem;
  text-align: center;
  margin: 2.0rem 0 0 2.0rem;
  color: #fff;
  background-color: #4caf50;
}
section.tile:hover{
  background-color: #6fbf72;
}
section.modal-content{
  position: fixed;
  display: none;
  width: 50vw;
  height: 50vh;
  line-height: 50vh;
  text-align: center;
  font-size: 6vw;
  top: 25vh;
  left: 25vw;
  color: #222222;
  background-color: #efefef;
  border-radius: 1.4vh;
  z-index: 2;
  -webkit-animation: fadeEffect 0.3s;
  animation: fadeEffect 0.3s;
}
@-webkit-keyframes fadeEffect{
  from{opacity: 0;}
  to{opacity: 1;}
}
JavaScript (modal.js)
  "use strict";
  document.addEventListener('DOMContentLoaded', function(){
    var modal = document.getElementById("modal");
    modal.addEventListener('click', function(){
      if(modal.className === "modal-opened"){
        var tile = document.getElementsByClassName("tile");
        var i, lenI, target;
        for (i=0, lenI=tile.length; i<lenI; i++){
          var modalContent = document.getElementById(tile[i].attributes.getNamedItem("data-target").value);
          modalContent.style.display = "none";
          modalContent.className = "modal-content";
        }
        modal.className = "modal-closed";
      }
    },false);
  }, false);
  document.addEventListener("DOMContentLoaded", function(){
    var tiles = document.getElementsByClassName("tile");
    var modal = document.getElementById("modal");
    var i, lenI, target, modalContent;
    for (i=0, lenI=tiles.length; i<lenI; i++){
      tiles[i].addEventListener("click", function(){
        target = this.attributes.getNamedItem("data-target").value;
        modalContent = document.getElementById(target);
        if (modal.className === "modal-opened"){
          modalContent.style.display = "none";
          modal.className = "modal-closed";
        }
        else if (modal.className === "modal-closed"){
          modalContent.style.display = "block";
          modal.className = "modal-opened";
        }
      }, false);
    }
  }, false);

まとめ

初めてJavaScriptを書いたので, おかしいところも多いと思うけど, 参考になれば幸いです.