【jQuery&CSS】画像クリックでモーダルウィンドウを表示する

ウェブサイトやブログにおいて、画像をクリックしてモーダルウィンドウを表示する機能は、ユーザー体験を豊かにする素晴らしい方法です。

この記事では、HTML、CSS、およびjQueryを使用して、この機能を簡単に実装する方法をご紹介します。

画像クリックでモーダルウィンドウを表示

まずDEMOはこちら

ステップ1: HTMLの準備

<div class="modal">
    <div class="modal_content">
        <div class="modal_close_box">
            <div class="modal_close"></div>
        </div>
    </div>
</div>

ステップ2: CSSでスタイリング

次に、以下のCSSを使用してモーダルウィンドウをスタイリングします。

このCSSは、モーダルの位置、サイズ、背景色などを定義します。

.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal_img {
  cursor: pointer;
}

.modal_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1000px;
  height: 80%;
}

.modal_content img {
  width: 100%;
 height: 100%;
  object-fit: contain;
}


.modal_close {
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: -50px;
  right: 0px;
  transition: 0.3s;
}

.modal_close:hover {
  opacity: 0.7;
}

.modal_close::before, .modal_close::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  margin-left: -50%;
  background-color: #fff;
}

.modal_close::before {
  transform: rotate(45deg);
}

.modal_close::after {
  transform: rotate(-45deg);
}

.modal_close_box {
  position: relative;
}

ステップ3: jQueryでインタラクションを追加

jQueryを使用して、モーダルウィンドウの開閉を制御します。以下のスクリプトを追加して、モーダルウィンドウの挙動を実装します。

$(function () {
  //モーダルウィンドウを表示する
  $(".modal_img").click(function () {
    $(".modal").fadeIn();
    $(".modal_content").fadeIn();
    var imgSrc = $(this).attr("src");
    $(".modal_content").html('<img src="' + imgSrc + '">');
    //.modal_contentの高さを取得
    var height = $(".modal_content").height();
    //画像の高さを取得
    var imgHeight = $(".modal_content img").height();
    //サイトの背景をスクロールさせない
    $("body").addClass("lock");
  });
  //モーダルウィンドウを閉じる
  $(".modal").click(function () {
    $(".modal").fadeOut();
    $(".modal_content").fadeOut();
    //サイトの背景をスクロールさせる
    $("body").removeClass("lock");
    //.modal_contentのoverflow-y:scrollを削除
    $(".modal_content").css("overflow-y", "visible");
  });
});

ステップ4: モーダルのトリガーを設定

モーダルウィンドウを開くためには、modal_imgクラスを持つ要素が必要です。

以下のように画像を配置し、クリック時にモーダルが開くようにします。

<img src="your-image.jpg" class="modal_img">

ステップ5: モーダルのカスタマイズ

モーダルウィンドウをさらにカスタマイズして、ブログのデザインに合わせましょう。

CSSを調整してスタイルを変更したり、jQueryのスクリプトを変更して異なる動作を追加したりできます。

まとめ

このチュートリアルに従って、画像をクリックすると表示されるモーダルウィンドウをブログに簡単に追加できます。

この機能は、ユーザーが追加のコンテンツを見やすくするだけでなく、インタラクティブな体験を提供することで、サイトの魅力を高めることができます。