jQueryで作るテキストモーダルウィンドウ

今回やりたいこと

画像のサムネイルをクリックすると、画像が拡大表示されるモーダルウィンドウはよく見る機会がありますが、今回は画像の拡大ではなく、あるトリガーをクリック(タッチ)したら、画像やテキストを内包したコンテンツをモーダル表示させるコンテンツを実装します。

HTML(今回はPugで記述してます)

まず最初にHTMLです。今回はPug記法で記述しておりますので、HTMLとして使用したい場合は変換ツールなどを使ってください。


//- トリガーとなる要素
.trigger.js-modal-open
  img(src="https://placehold.jp/150x150.png", alt="")

//- モーダルコンテンツ
.modal.js-modal
  .modal__overlay.js-modal-close
  .modal__contents
    .modal__contents__detail
      .modal__contents__detail__img
        img(src="https://placehold.jp/150x150.png", alt="")
      .modal__contents__detail__txt
        p ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
    .modal__close.js-modal-close ×

「.modal__contents__detail」の中身はカスタマイズしてください。今回は画像とテキストを横並びに配置したコンテンツとしています。

CSS(今回はScssで記述してます)

次にCSSです。


.trigger {
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  height: 100vh;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  &__overlay {
    background: rgba(0, 0, 0, 0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
  }
  &__close {
    position: absolute;
    top: -80px;
    font-weight: 20;
    right: 0;
    font-size: 40px;
    color: #fff;
  }
  &__contents {
    background: #fff;
    width: 90%;
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 10px;
    transform: translate(-50%, -50%);
    z-index: 100;
    &__detail {
      display: flex;
      &__img {
        margin-right: 10px;
      }
    }
  }
}

ポイントはモーダルコンテンツを「display: none;」で非表示にしておくということです。また「&__overlay」で背景の黒透過、「&__close」で閉じるボタンを装飾として付けています。装飾といいつつモーダルを実装するときにはほしい装飾だと思います。

jQuery

最後にjQueryの記述になります。


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

    console.log("close");
    return false;
  });
});

たったこれだけの記述でOKです。HTMLのクラス名を変更するときはjQueryの方も忘れずに変更するようにしてください。

related article

2019/12/10 JavaScript

slickで現在のページ数 / 総ページ数を表示させる

2020/07/31 JavaScript

Youtubeをスマホでインライン自動再生させる

2019/10/15 JavaScript

スマホで背景スクロールを禁止にする

2019/12/06 JavaScript

area要素で地図をホバーした時に色を付ける方法