JavaScriptの.querySelectorAll()で複数のモーダル

2022年1月22日2022年3月21日 7分

モーダルウィンドウを、同一ページで複数表示させる場合に .querySelectorAll() を使うとモーダルの数の追加や修正が簡単です。

そんな「複数のモーダル」を作る際のJavaScriptのネイティブなスニペットについて解説します。

.querySelectorAll()
- 複数のセレクタを指定して使う場合
.querySelectorAll()を使ったモーダルのサンプル
モーダルのコード
- CSS

.querySelectorAll()

.querySelectorAll()は、指定したセレクタの条件と一致したHTML要素を全て配列で返します。そして、一致するものがない場合は、空のNodeListを返します。

.querySelectorAll(CSSのセレクタ);

書き方は上記のようにして、引数にCSSのセレクタをして使用します。

複数のセレクタを指定して使う場合

.querySelectorAll()は、複数のタグやclass名などを使うこともできるメソッドです。

複数のセレクタで「AND」や、「OR」の条件で使う方法については以下の記事で解説していますので、こちらも合わせてご覧ください。

2022年1月21日JavaScriptの.querySelectorAll()でマルチレベルのアコーディオン

.querySelectorAll()を使ったモーダルのサンプル

以下が、モーダルのサンプルです。

3つのボタンをクリックすると、それぞれに対応したモーダルウィンドウが開きます。

かかかず

サンプルでは3つのモーダルとボタンですが、これらの数も簡単に増やすことができる仕様です。

モーダルのコード

サンプルのモーダルのHTMLは、主に「ボタン」と「モーダルの中身」の2つに分かれています。

モーダルは「container」のclass名がついているdiv の中の button タグがクリックされることで、button タグのHTML属性の「data」を使って、JavaScriptと情報を交換させます。

<div class="container">
  <button class="modal-toggle btn-example" data-modal="modalOne">モーダル1</button>
  <button class="modal-toggle btn-example" data-modal="modalTwo">モーダル2</button>
  <button class="modal-toggle btn-example" data-modal="modalThree">モーダル3</button>
</div>
<!-- modalOne -->
<div id="modalOne" class="modal">
   <div class="modal-content">
     <div class="modal-top">
       <span class="modal-close">×</span>
      </div>
     <div class="modal-container">
       <img class="img" src="https://dubdesign.net/wp-content/uploads/2021/11/cms.svg" alt="">
       <p>Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。</p><p>1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。</p><p>1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windo</p>
     </div>
   </div>
</div>
<!-- modalOne -->
<!-- modalTwo -->
<div id="modalTwo" class="modal">
   <div class="modal-content">
     <div class="modal-top">
       <span class="modal-close">×</span>
      </div>
     <div class="modal-container">
       <p>山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。</p><p>意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の</p>
     </div>
   </div>
</div>
<!-- modalTwo -->
<!-- modalThree -->
<div id="modalThree" class="modal">
   <div class="modal-content">
     <div class="modal-top">
       <span class="modal-close">×</span>
      </div>
     <div class="modal-container">
       <p>日本国民は正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民と協和による成果と、わが国全土にわたって自由のもたらす恵沢を確保し、政府の行為によって再び戦争の惨禍が起こることのないようにすることを決意し、ここに主権が国民に存することを宣言し、この</p>
     </div>
   </div>
</div>
<!-- modalThree -->

かかかず

そしてclass="modal" がついたdivタグのモーダルが表示される構造です。

次にJavaScriptですが、.querySelectorAll() を使ってmodal-toggle のclassがついたボタンで onclick が発動して、対応するモーダルがそれぞれ表示される仕組みです。

const modalBtns = document.querySelectorAll(".modal-toggle");
modalBtns.forEach(function (btn) {
  btn.onclick = function () {
    var modal = btn.getAttribute('data-modal');
    document.getElementById(modal).style.display = "block";
  };
});
const closeBtns = document.querySelectorAll(".modal-close");
closeBtns.forEach(function (btn) {
  btn.onclick = function () {
    var modal = btn.closest('.modal');
    modal.style.display = "none";
  };
});

window.onclick = function (event) {
  if (event.target.className === "modal") {
    event.target.style.display = "none";
  }
};

このようにclass名をトリガーにしているので、対応したclass名をそれぞれ付与すれば、もっとモーダルウィンドウを作ることが可能です。

CSS

最後にCSSです。付与しているclass名は多くないので、これだけです。

.modal {
  display: none;
  position: fixed;
  z-index: 8887;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
  transition: all 1s ease-in-out;
}
.modal-container .img {
    background: #f1f1f1;
    margin-bottom: 15px;
}
.modal-container p {
    margin-bottom: 10px;
}
.modal-container p:last-child {
    margin-bottom: 0;
}
.modal-content {
    background: #FFF;
    overflow-y: auto;
    padding: 20px 25px;
    width: 90%;
    max-width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 400px;
    animation: show 0.6s linear 0s;
    filter: drop-shadow(0px 2px 6px #777);
}
.modal-top {
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 5px;
}
.modal-close {
    color: #FF0000;
    text-decoration: none;
    font-size: 2rem;
    line-height: 1;
    padding: 0 8px;
}
.modal-close:hover, .modal-close:focus {
  text-decoration: none;
  cursor: pointer;
}
.modal-title {
  color: #FFF;
}
@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

モーダルが表示される時のアニメーションは、@keyframes で定義したアニメーションプロパティをあてて、フェードインさせています。

かかかず

コード量がそこまで多くないので、カスタマイズもしやすい記述です。