KH-WEBLOG TOP > WEBメモ > JavaScript > 複数モーダルウィンドウの中身をjsで出力する:jQuery

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

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

コーディング・WordPress化作業を代行します

HTML・CSSの準備

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

<div id="modal01" class="modal js-modal">
  <div class="modal-bg modal-close">
  </div>
    <div class="modal-content">
        <p>モーダル枠1</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ファイル内から出力テキストを管理するだけで大丈夫ですのでわかりやすいかと思います。

コーディング・WordPress化作業を代行します

JavaScriptのおすすめ参考書

楽天ブックス
¥2,728 (2024/04/16 09:20時点 | 楽天市場調べ)
\楽天ポイント5倍セール!/
楽天市場
楽天ブックス
¥2,838 (2024/04/13 07:28時点 | 楽天市場調べ)
\楽天ポイント5倍セール!/
楽天市場
楽天ブックス
¥2,838 (2024/04/16 09:20時点 | 楽天市場調べ)
\楽天ポイント5倍セール!/
楽天市場

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン ブログカード プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク リンクカード レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 関連記事