jQuery Web制作

【jQuery】背景をクリックしても閉じるモーダルウィンドウの作り方

2020年6月12日

※ 当サイトではアフィリエイト広告を利用しています

モーダルウィンドウってどうやって作るの?

モーダルウィンドウと言えばLightboxなどの有名なプラグインを使用しても実装可能ですが、今回はプラグインを使わずに実装する方法をご紹介します。

ただ個人的にはMicromodal.jsというライブラリを使った方がいいと思っています(実務でもこちらを使っています)

Micromodal.jsを使う方法については以下の記事を参照下さい。

あわせて読みたい
簡単にモーダルウィンドウを実装できるライブラリ Micromodal.jsの使い方
Micromodal.jsの使い方【モーダルウィンドウを簡単に実装できるライブラリ】

続きを見る

また今回はjQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。

jQueryの使い方はこちらの記事を参照下さい。

あわせて読みたい
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方も分かりやすく解説

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

モーダルウィンドウとは?

まずモーダルウィンドウについて軽く説明します。

モーダルウィンドウとは、ボタンなどをクリックしたら別ウィンドウで最前面に表示されるものです。

ポップアップと似たようなものですが、ポップアップは前面に目立つように表示されるだけでスクロールや別の操作が出来るのに対し、モーダルウィンドウは表示を閉じるまで他のウィンドウを開くことが出来ません。

今回はボタンをクリックしたら画像が表示されるようなモーダルウィンドウを作ってみたいと思います。

早速ですがこちらが今回作るモーダルウィンドウのデモになります。

スクロールしていくと表示される『トイプードル』というボタンがあるのでクリックして下さい。

See the Pen
モーダルウィンドウ
by junpei (@junpei-sugiyama)
on CodePen.

『閉じる』ボタンか薄暗い背景をクリックすると画像は非表示になります。



jQueryを使って背景をクリックしても閉じるモーダルウィンドウの作り方

それでは順番にコードを解説していきます。

 

コード解説

まずはHTMLから見てみます。

<body>
  <main>
    <section class="about">
      <p>ここにABOUTテキストが入ります。</p>
    </section>
    <div class="btn">
      <a class="btn__link js-modal-open" href="">ハリネズミ</a>
    </div>
    <div class="modal js-modal">
      <div class="modal__overlay js-modal-close"></div>
      <div class="modal__content">
        <img src="画像のパス" />
        <p><a class="js-modal-close" href="">閉じる</a></p>
      </div>
    </div>
  </main>
</body>

今回作るモーダルウィンドウはオープン時に背景をスクロールさせないようにするため、スクロール出来るような長さになるようにsectionを入れています。

<div class="modal__overlay js-modal-close"></div>はモーダルウィンドウの薄暗い背景で、ここをクリックしても閉じるようにしたいので、ここにも閉じるためのclassである.js-modal-closeを付けています。

CSSはモーダルに関係する部分だけ書きます。

.btn {
  margin: 0 auto 200px;
  width: 100px;
}
.btn a {
  background-color: #fffacd;
  color: #222;
  font-size: 16px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}
.modal {
  display: none;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}
.modal__overlay {
  background: rgba(0, 0, 0, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
}
.modal__content {
  background: #fff;
  left: 50%;
  padding: 10px;
  position: absolute;
  text-align: right;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 200px;
  width: 100%;
}
.modal__content img {
  max-width: 200px;
  width: 100%;
}
.modal__content p {
  background-color: #eee;
  display: inline-block;
  font-size: 16px;
}
.modal__content a {
  color: #000;
  padding: 5px 10px;
  text-align: right;
}
.fixed {
  height: 100%;
  position: fixed;
  width: 100%;
}

.modalが実際に開く部分で、最初はdisplay: none;にして非表示にしておきます。

これはjQueryで表示非表示をコントロールします。

.fixedは背景を固定させるためのCSSで、モーダルウィンドウを開いた時にjQueryを使ってbodyに付与します。

最後にjQueryです。これはモーダルウィンドウと背景固定で分けています。

// モーダルウィンドウ
$(function () {
  $(".js-modal-open").on("click", function () {
    $(".js-modal").fadeIn();
    return false;
  });
  $(".js-modal-close").on("click", function () {
    $(".js-modal").fadeOut();
    return false;
  });
});
// モーダルウィンドウオープン時の背景固定
$(function () {
  let scrollPosition;
  $(".js-modal-open").on("click", function () {
    scrollPosition = $(window).scrollTop();
    $("body").addClass("fixed").css({ top: -scrollPosition });
  });
  $(".js-modal-close").on("click", function () {
    $("body").removeClass("fixed").css({ top: 0 });
    window.scrollTo(0, scrollPosition);
  });
});

.js-modal-openが付いているボタンをクリックすると.js-modalが表示され、.js-modal-closeをクリックすると非表示になります。

.js-modal-closeは『閉じるボタン』と『薄暗い背景』になります。

背景固定については.js-modal-openが付いているボタンをクリックするとbodyに.fixedで書いたプロパティが反映され、背景が固定されます。

そして『閉じるボタン』か『薄暗い背景』をクリックすれば固定も解除されます。

それではもう一度完成形を見てみましょう。

See the Pen
モーダルウィンドウ
by junpei (@junpei-sugiyama)
on CodePen.

画像が表示されたら背景のスクロールもされないようになっているのが確認出来ると思います。

まとめ

今回は背景をクリックしても閉じるモーダルウィンドウの作り方を解説しました。

ただし冒頭でも書いた通り、Micromodal.jsを使う方がおすすめです。

あわせて読みたい
簡単にモーダルウィンドウを実装できるライブラリ Micromodal.jsの使い方
Micromodal.jsの使い方【モーダルウィンドウを簡単に実装できるライブラリ】

続きを見る

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-jQuery, Web制作