Suzuki Blog Written by Yuki Suzuki

モーダルウィンドウの実装方法【jQuery】

jQuery Programming

こんにちは!スズキです。

今回はjQueryを使った、モーダルウィンドウの実装方法について紹介します。

モーダルウィンドウとは、例えば、画像をクリックするとその画像が拡大表示される仕組みのことです。

モーダルウィンドウを表示すると、指定された操作を完了するか、キャンセルするかしないと、他の操作ができません。

そのため、重要な操作や確認を促したいときに、よく使用されます。

jQueryを使えば、わずかなコードでモーダルウィンドウを実装することができます。

記事の内容

  • HTML
  • CSS
  • jQuery

スポンサードサーチ

HTML


  <!-- CSS読み込み -->
  <link rel="stylesheet" href="./style.css">

  <!-- jQuery読み込み -->
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script src="./practice.js"></script>

まずは、headタグ内でCSSとjQueryを読み込みます。

jQueryライブラリ、jsファイルの順で読み込みましょう。


  <div>
    <a class="js-modal-open" href="">クリックでモーダルを表示</a>
  </div>
  <div class="modal js-modal">
    <div class="modal-bg js-modal-close"></div>
    <div class="modal-content">
      <p>コンテンツコンテンツコンテンツ</p>
      <a class="js-modal-close" href="">閉じる</a>
    </div>
  </div>

次に、bodyタグ内に記述していきます。

モーダルウィンドウを表示するためのもの(ここではaタグ、js-modal-open)を作成し、続いてモーダルウィンドウの中身を作成します。

modal-bgはモーダルウィンドウの背景をクリックしたときにモーダルウィンドウを閉じるために作成しています。

modal-content内にモーダルウィンドウで表示したいコンテンツを作成してください。

また、ここでは閉じるボタンも作成しています。(js-modal-close)

CSS


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

.modal-bg{
  background: rgba(0,0,0,0.8);
  height: 100vh;
  width: 100%;
  position: absolute;
}

.modal-content{
  background: #fff;
  padding: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

次にCSSを書いていきます。

モーダルウィンドウ全体を囲っている.modalにはdisplayをnoneにしておきます。

クリックするまで、モーダルウィンドウを非表示にしておくためです。

.modal-bgにはheightを100vh、widthを100%にします。

モーダルウィンドウの高さと幅をブラウザに合わせるためです。

また、.modal-contentにはpositionをabsoluteにし、leftを50%、topを50%にします。

これにより、コンテンツが親要素を基準にして左に50%、上から50%の位置に移動します。

その後、transformにtranslate(-50%,-50%)を指定します。

transformは自分自身を基準にして移動するため、コンテンツを中央配置することができます。

スポンサードサーチ

jQuery


$(function(){
  $('.js-modal-open').on('click',function(){
      $('.js-modal').fadeIn();
      return false;
  });
  $('.js-modal-close').on('click',function(){
      $('.js-modal').fadeOut();
      return false;
  });
});

最後にjQueryのコードを書いていきます。

.js-modal-openをクリックするとモーダルをフェードインさせ、.js-modal-closeをクリックするとモーダルをフェードアウトさせています。

まとめ

いかがでしたか。

jQueryを使えば、わずかなコードでモーダルウィンドウを実装できます。

ぜひ試してみてください。

以上です。

コーディングを学ぶならデイトラ

Web制作コース

動画でプログラミングを学ぶなら

Udemy

オンラインスクールでプログラミングを学ぶなら

Skill Hacks