i-f – Web Works –

【初心者向け】jQueryでシンプルなモーダルウィンドウを作成する方法！コピペOK！

JavaScript

プラグインは使わず、jQueryで作れるシンプルなモーダルウインドを作りました。

汎用性も高いので、ご自身のサイトに簡単に実装可能です。

デザインは、シンプルなものなので、サイトに合わせて調整することも可能です。

  1. シンプルなモーダルウィンドウのサンプルコード
  2. モーダルウィンドウのコード解説
  3. モーダルウィンドウが動作不具合が起きたときの対処法
  4. モーダルウィンドウ内に画像を動的に切り替えて表示させる方法
目次

【完成コード】モーダルウィンドウのサンプルコード

<!-- modal -->
<a class="modal-btn sp js-modal-btn"><span class="tx">モーダルが開きます</span><span class="icon"></span></a>

<!-- modal -->
<div id="js-modal" class="modal">
  <div class="inr">
    <div class="cont">
      <div id="js-close-btn" class="close-btn"><span class="bar"></span><span class="bar"></span></div>
      
      <!-- ここにコンテンツを自由に入れてください -->

    </div>
  </div>
</div>
<!-- /.modal -->
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: #fff;
  .inr {
    padding: 0 20px;
  }
}
.close-btn {
  position: absolute;
  top: 0;
  left: $inner-padding-sp;
  width: 36px;
  height: 36px;
  cursor: pointer;
  .bar {
    position: absolute;
    z-index: 100;
    background: #000;
    width: 100%;
    height: 2px;
    top: 50%;
    left: 50%;
    &:nth-child(1) {
      transform: translate(-50%,-50%) rotate(45deg);
    }
    &:nth-child(2) {
      transform: translate(-50%,-50%) rotate(-45deg);
    }
  }
}
.modal-btn {
  max-width: 320px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  background: #5c6970;
  padding: 17px 0;
  border-radius: 100vw;
  cursor: pointer;
  .tx {
    font-size: 18px;
    color: #fff;
    letter-spacing: .06em;
  }
  .icon {
    $icon-size: 23px;
    width: $icon-size;
    height: $icon-size;
    border: 1px solid #fff;
    border-radius: 100vw;
    position: relative;
    &::before {
      content: "+";
      position: absolute;
      top: 48.5%;
      left: 50%;
      transform: translate(-50%,-50%);
      color: #fff;
      font-size: 20px;
    }
  }
}
    const modalBtn = $('.js-modal-btn');
    const modal = $('#js-modal');
    const body = $('body');
    modalBtn.on('click',function() {
      modal.fadeIn();
      body.addClass('no-scroll');
    });

    const close = $('#js-close-btn');
    close.on('click',function() {
      modal.fadeOut();
      body.removeClass('no-scroll');
    });

コードの解説

それでは、重要なコードを部分的に解説をしていきます。

モーダルウィンドウで大切なものは、以下の３点です。

  • モーダルウィンドウを表示させるボタン
  • モーダルウィンドウを非表示にするボタン
  • モーダルウィンドウの設定内容
  • モーダルウィンドウ下のメインコンテンツのスクロール防止

モーダルウィンドウ自体は、特に難しいことがなく、表示・非表示させるボタンが重要になります。

モーダルウィンドウを表示させるボタン

「modal-btn」は、モーダルを表示させるボタンです。

モーダルを表示させる方法は、ボタンでなくても構いませんが、その際はjQueryのイベントを修正してもらいたいのと、const modalBtn = $(‘.js-modal-btn’);の部分で対象を変更してください。

js-modal-btnのクラス名が、jQueryと連動していますので、クラス名を変更しないように注意が必要です。

ボタンを画像にしたり、別のボタンを使いたいときは、クラス名を付け替えてください。

モーダルウィンドウを非表示にするボタン

次にモーダルを閉じるボタン「js-close-btn」です。

これは、モーダルが表示されている間、左上に配置しておき、js-close-btnをクリックするとモーダルが非表示になる設定になっています。

js-close-btnもjs-modal-btn同様にデザイン変更、対象を画像にすることが可能です。

対象を変更される場合は、js-close-btnのIDだけつけかえてください。

モーダルウィンドウの設定内容

最後にモーダルウィンドウの設定内容をご説明します。

モーダルウィンドウは、CSSで非表示(display: none;)にしてあります。

「modal-btn」をクリックしたら、jQueryのメソッドfadeIn()で表示させています。

閉じるときは、js-close-btnをクリックしたときに、fadeOut()メソッドを使って、非表示に戻しています。

各コードを抜粋すると以下の通りです。

//モーダルウィンドウ全体を取得
const modal = $('#js-modal');

//表示の動作
modal.fadeIn();

//非表示の動作
modal.fadeOut();

表示・非表示の動作以外は、CSSでデザインを整え、表示中はウインドウいっぱいに広がるように、positionプロパティを設定しています。

以下、非表示のプロパティとpositionの設定の抜粋です。

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}

モーダルウィンドウ下のメインコンテンツのスクロール防止

メインコンテンツのスクロール防止は、設定しておいた方が親切だと思います。

不要なら、読み飛ばしてください。

メインコンテンツのスクロール防止とは、どういったものかというと。

モーダルウィンドウが表示されている間、スクロールをしてしまうと、モーダルウィンドウの下に表示されているメインコンテンツ(body)内のコンテンツがスクロールしてしまいます。

スクロールしてしまうと、モーダルウィンドウが閉じときに、閲覧していた箇所がずれてしますので、ユーザーにとってもは少し使いずらい仕様になってしまいます。

そこで、モーダルウインドが開いている間は、body内のコンテンツが動かないように設定してあげます。

const body = $('body');
body.addClass('no-scroll');
body.no-scroll {
 overflow: hidden;
}

overflow: hidden;とすることで、body内のコンテンツがスクロールすることを防げます。

もし、モーダルウインド表示中にbodyをスクロールさせないようにしたら、モーダルウィンドウを閉じたときに、必ずno-scrollのクラスを削除してあげましょう。

body.removeClass('no-scroll');

モーダルウィンドウが動かないときの解決方法

モーダルウィンドウは正しく動作しない、もしくは動かないときは、以下を確認してみてください。

  1. jQueryは読み込まれているか。
  2. イベント発火のための要素は取得できているか。

それぞれ、解説していきます。

jQueryは読み込まれているか。

紹介しているコードは、jQueryで記述して言います。jQueryのライブラリを必ず読み込んでください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

そして、読み込みは必ず記述の前にしてください。

記述のあとに読み込んでも、正しく動作しません。

イベント発火のための要素は取得できているか。

コードの解説で書きましたが、イベント用のIDとクラスがつけてあります。

IDもクラスも、適切な箇所に設定されていなければ、動作不具合の原因となります。

再度、コードの解説を読み直して、正しい箇所に設定されているか確認してみてください。

動的にsrcを生成して、モーダルウィンドウに画像を表示させる

最後に私が実務で実装した実際のコードを載せておきます。

以下のコードは、クリックしたボタンと画像をリンクさせて、モーダルウィンドウの中に表示する画像を切り替えています。

同一ページ内で何度もモーダルウインドウを使いまわす場合などに使える記述となります。

モーダルウィンドウを使いまわす必要があるときは、応用として使ってみてください。

<!-- モーダルの中に入るコンテンツ -->
<div class="img"><img id="image-01" src="../assets/img/access/access-map.png" alt=""></div>

<!-- modal -->
<a class="modal-btn sp js-modal-btn" data-image="image-01"><span class="tx">モーダルが開きます</span><span class="icon"></span></a>

<!-- modal -->
<div id="js-modal" class="modal">
  <div class="inr">
    <div class="cont">
      <div id="js-close-btn" class="close-btn"><span class="bar"></span><span class="bar"></span></div>
      
      <div class="modal-img"><div class="img"><img id="js-modal-img" src="" alt=""></div></div>

    </div>
  </div>
</div>
<!-- /.modal -->
    const modalBtn = $('.js-modal-btn');
    const modal = $('#js-modal');
    const body = $('body');
    modalBtn.on('click',function() {
      let data = modalBtn.data('image');
      let t = $('#' + data);
      let src = t.attr('src');
      const modalImage = $('#js-modal-img');
      let modalImageSrc = modalImage.attr('src', src);
      modal.fadeIn();
      body.addClass('no-scroll');
    });

    const close = $('#js-close-btn');
    close.on('click',function() {
      modal.fadeOut();
      body.removeClass('no-scroll');
    });

cssは、特別重要ではありませんので、割愛します。

大切なところは、以下２点です。

  • モーダルを開くボタンと対象の画像が連動していること。
  • jQueryでボタンにつけたデータ属性を取得して、画像のパスを変更していること。

以上、２点です。

簡単に紹介しておきます。

モーダルを開くボタンと対象の画像が連動していること。

data属性を使って、imgタグに設置したIDと連動させています。

<!-- id="image-01" -->
<div class="img"><img id="image-01" src="../assets/img/access/access-map.png" alt=""></div>

<!-- data-image="image-01"-->
<a class="modal-btn sp js-modal-btn" data-image="image-01"><span class="tx">モーダルが開きます</span><span class="icon"></span></a>

対象の画像が増えたときは、連動するボタンを増やしてあげます。

そうすることで、各ボタンをクリックすれば、モーダルウィンドウ内に入る画像が、クリックしたボタンによって切り替わります。

jQueryでボタンにつけたデータ属性を取得して、画像のパスを変更していること。

モーダルウィンドウの方は、カラのsrcを設置した状態で作っておきます。

その代わり、ボタンをクリックしたときに、連動したimgタグのパスを表示前に入れてあげます。

//ボタンのdata属性を取得      
let data = modalBtn.data('image');

//取得したdata属性をIDへ変換
let t = $('#' + data);

//対象の画像を取得
let src = t.attr('src');

//モーダルウィンドウ内のimgタグを取得
const modalImage = $('#js-modal-img');

//取得した対象の画像パスをモーダルウィンドウ内のimgタグへ挿入
let modalImageSrc = modalImage.attr('src', src);

今回は画像でしたが、HTMLをまるごと取得すれば、取得したHTMLをそのままモーダルウィンドウ内に表示することも可能です。