JS.26 モーダル（ポップアップ）の作成

画像や広告などが表示され、クリックや閉じるなどの操作をしないとページが閲覧できないような表現をモーダルと呼ぶ。今回は、これをライブラリを使わない素のJavascriptによるDOM操作で作った。

作ったもの

以下のように、id=ID の div タグの中にポップアップ時に表示されるコンテンツを入れ、id=ID+"-show"の要素をクリックすることでこれを表示できるようにした。

<div class="popup" id="js-popup">
  Any thing You Want !!
</div>
<button id="js-popup-show">Show Popup</button>

コード

js

Download

window.onload = function(){
  var popuplists = document.getElementsByClassName("popup");
  for(let i=0; i<popuplists.length; i++){
    let e = popuplists[i];
    let id = e.id;
    let e_s = document.getElementById(id + "-show")
    if (e_s != null){
      e.innerHTML = `<div class="popup-inner"><div class="close-btn"><i class="fas fa-times"></i></div>` + e.innerHTML + `</div><div class="black-background"></div>`
      addPopupEvent(id);
      // ページ読み込み時に表示させるかどうか。
      // document.getElementById(id + "-show")
    }
  }

  function addPopupEvent(id){
    var t = document.getElementById(id);
    function togglePopUp(e) {
      if (e){
        e.addEventListener('click', function() {
          t.classList.toggle('is-show');
        });
      }
    }
    togglePopUp(t.querySelector(".black-background"));
    togglePopUp(t.querySelector(".close-btn"));
    togglePopUp(document.getElementById(id + "-show"));
  }
};

css

Download

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  max-width: 80%;
  max-height: 80%;
  overflow: auto;
  padding: 50px;
  background-color: #fff;
  z-index: 2;
}
.popup-inner img {
  width: 100%;
}
.close-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
.close-btn i {
  font-size: 40px;
  color: #333;
  border: 3px solid;
  border-radius: 50%;
  width: 40px;
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 1;
  cursor: pointer;
}
other contents
social