複数モーダルウィンドウの中身をjsで出力する：jQuery

2023-07-21 JavaScript

モーダルウィンドウをページ内に複数設置する際に、モーダルの中身をHTMLで1つずつ用意するとサイトが重くなったり管理が手間になりますので、共通部分の枠を用意し、個別のテキストや画像はjsから出力する方法をご紹介します。

1 HTML・CSSの準備
2 jQueryのコード

HTML・CSSの準備

<a href="#" class="modal-open" id="m1" data-js-modal="modal01">モーダルウィンドウ１を開く</a>
<a href="#" class="modal-open" id="m2" data-js-modal="modal02">モーダルウィンドウ２を開く</a>

<div id="modal01" class="modal js-modal">
  <div class="modal-bg modal-close">
  </div>
    <div class="modal-content">
        <p>モーダル枠１</p>
      <div class="mtxt1"></div>
      <div class="mtxt2"></div>
      <div class="mimg1"></div>
      <a href="#" class="modal-close">閉じる</a>
    </div>
</div>

<div id="modal02" class="modal js-modal">
  <div class="modal-bg modal-close">
  </div>
    <div class="modal-content">
        <p>モーダル枠2</p>
      <div class="mtxt1"></div>
      <div class="mtxt2"></div>
      <div class="mimg1"></div>
      <a href="#" class="modal-close">閉じる2</a>
    </div>
</div>

まず、上記のようにモーダルの枠を2パターン作成します。
モーダルを表示するボタンも今回は2つ用意しています。
mtxt1～2やmimg1のクラス部分は個別のhtmlを出力する用の枠です。

ボタンには出力するテキストをjQueryで指定する為にそれぞれIDを振っています。

<style>
.modal{
  display: none;
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%;
}

/* モーダル背景 */
.modal-bg{
  position: absolute;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
}

/* モーダル本体 */
.modal-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: scroll;
  height: 60%;
  width: 60%;
  background: white;
  padding: 40px;
}

/* モーダルウィンドウ表示中にページを固定 */
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}
 
</style>

CSSは簡易的に必要最低限のみ記述しています。

jQueryのコード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    // モーダルウィンドウを開く
    $('.modal-open').on('click', function(){
      var target = $(this).attr('data-js-modal');
      var modal = document.getElementById(target);
      scrollPosition = $(window).scrollTop();

      $('body').addClass('fixed').css({'top': -scrollPosition});
      $(modal).fadeIn();
      return false;
    });

    // モーダルウィンドウを閉じる
    $('.modal-close').on('click', function(){
      $('body').removeClass('fixed');
      window.scrollTo( 0 , scrollPosition );
      $('.js-modal').fadeOut();
      return false;
    });
//ここからそれぞれのボタンをクリックした際のモーダル内に出力するテキストを指定
    $('#m1').on('click', function(){
        $('#modal01 .mtxt1').html('<p>サンプルテキスト<br>サンプル</p>');
        $('#modal01 .mtxt2').html('<p>サンプルテキスト2<br>サンプル2</p>');
        $('#modal01 .mimg1').html('<img src="画像URL" alt="">');
    }); 
    $('#m2').on('click', function(){
        $('#modal02 .mtxt1').html('<p>サンプルテキスト3<br>サンプル3</p>');
        $('#modal02 .mtxt2').html('<p>サンプルテキスト4</p>');
    }); 
</script>

あとはjQuery本体を読み込み、上記のソースを記載すれば完了です。

この方法ですとHTML内はごちゃごちゃせず、ファイルサイズも軽くなり、jsファイル内から出力テキストを管理するだけで大丈夫ですのでわかりやすいかと思います。