【Labs】jQueryでモーダルウィンドウに画像を拡大表示

9月更新・前月(8月)の人気記事トップ10 09/04/2023

【Labs】ブログ記事やHTMLページにインスタグラムを埋め込む方法【blog】TOSHIBAの外付けHDDを買ってみた

【Labs】jQueryでモーダルウィンドウに画像を拡大表示

Posted on 2021-11-25
Last updated on 2021-11-25

こんにちは（・∀・）

画像をクリックしたらモーダルウィンドウで画像を拡大して表示するサンプルをご紹介します。

jQueryでモーダルウィンドウに画像を拡大表示

imgタグで表示している画像をクリックしたらその画像を拡大表示させるスクリプトです。

こちらのサイト画像をクリックしたらモーダル画面で表示するjQueryを自作してみるのスクリプトを参考にさせていただきました。シンプルな作りで簡単に導入することが出来るのでオススメです。

Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。


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

HTML


<div id="modal-window-image"></div>

<p><img src="01.jpg" alt="Webデザインラボ"></p>

pタグの子要素imgタグで表示されている画像をクリックすると空のmodal-window-imageに拡大画像が表示されます。modal-window-imageの初期値は非表示です。

CSS


p img {
  cursor: pointer;
}
#modal-window-image {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  cursor: pointer;
  z-index: 100;
}
#modal-window-image img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 98%;
  height: auto;
}
@media (min-width: 960px) {
#modal-window-image img {
  width: auto;
  height:98%;
}
}

JavaScript


$(function(){
  $("p img").click(function() {
    $("#modal-window-image").html($(this).prop('outerHTML'));
    $("#modal-window-image").fadeIn(100);
  });
  $("#modal-window-image, #modal-window-image img").click(function() {
    $("#modal-window-image").fadeOut(100);
  });
});

Result

サンプルデモ

参考

画像をクリックしたらモーダル画面で表示するjQueryを自作してみる

【Labs】ブログ記事やHTMLページにインスタグラムを埋め込む方法【blog】TOSHIBAの外付けHDDを買ってみた