プログラマーの技術や経験の暴露ブログです。何か聞きたいことがあれば遠慮なくご連絡ください。

jQuery(js) 2018.09.14 2018.09.17munehiro

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

WEBページを見ているとき画像が小さくてよく見えないときありますよね？

そんなときに、画像をクリックしたらモーダル画面で拡大されて表示されたら便利じゃないですか？

モーダル画面（モーダルウィンドウ）は、操作が完了するまで親画面の操作を受け付けなくするウィンドウのことです。

たとえば今回の画像もそうですが、ログインボタンを押したらログインフォームがふわっと出てくるなんてのも作れます。

このモーダル画面はjQueryのプラグインなどを使えば簡単に出来るのですが、勉強の為に自作してみました。

画像をクリックしたらモーダル画面で表示するサンプルコード

モーダル画面のサンプルはこちら

HTML

<main id="main" style="min-height: 1000px;">
  <article>
    <header>
      <h1>画像をクリックするとモーダルウィンドウで開く</h1>
    </header>
    <section>
      <img src="https://dev-lib.com/media/wp-content/uploads/2014/09/52164e3316da586b6d59403e1a457bdf.jpg">
      <img src="https://dev-lib.com/media/wp-content/uploads/2015/05/2015-05-04-13.09.55.jpg">
      <img src="https://dev-lib.com/media/wp-content/uploads/2015/03/10955641_706775176088558_894981013_n.jpg">
    </section>
    <footer></footer>
  </article>
</main>
<div id="graydisplay"></div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<main id="main" style="min-height: 1000px;">

<article>

<header>

<h1>画像をクリックするとモーダルウィンドウで開く</h1>

</header>

<section>

<img src="https://dev-lib.com/media/wp-content/uploads/2014/09/52164e3316da586b6d59403e1a457bdf.jpg">

<img src="https://dev-lib.com/media/wp-content/uploads/2015/05/2015-05-04-13.09.55.jpg">

<img src="https://dev-lib.com/media/wp-content/uploads/2015/03/10955641_706775176088558_894981013_n.jpg">

</section>

<footer></footer>

</article>

</main>

<div id="graydisplay"></div>

今回はmainタグの中にある画像だけクリックすると大きく表示されるようにしようと思います。

なのでmainタグ部分だけ抜粋しました。

CSS

#graydisplay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%!important;
  height: 100%;
  background: rgba(0,0,0,0.45);
}
#graydisplay img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 90%;
  max-height: 90%;
  height: 90%;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

#graydisplay {

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

max-width: 100%!important;

height: 100%;

background: rgba(0,0,0,0.45);

}

#graydisplay img {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

max-width: 90%;

max-height: 90%;

height: 90%;

}

モーダル画面ようのCSSです。

jQuery

$(function(){
  $("main img").click(function() {
    $("#graydisplay").html($(this).prop('outerHTML'));
    $("#graydisplay").fadeIn(200);
  });
  $("#graydisplay, #graydisplay img").click(function() {
    $("#graydisplay").fadeOut(200);
  });
});

1

2

3

4

5

6

7

8

9

$(function(){

$("main img").click(function() {

$("#graydisplay").html($(this).prop('outerHTML'));

$("#graydisplay").fadeIn(200);

});

$("#graydisplay, #graydisplay img").click(function() {

$("#graydisplay").fadeOut(200);

});

});

コードの解説

今回実現したいプログラムの仕様は以下の通りです。

画像をクリックするをモーダル画面が起動しクリックした画像と同じ画像が表示される。
モーダル画面もしくは拡大表示された画像をクリックするとモーダル画面が消える。

文章にするとたった2行ですね(笑)

HTMLの最後の行にある #graydisplay がモーダル画面になる部分です。

モーダル画面は最初は非表示なのでCSS2行目でdisplay: none; を指定し、非表示にしています。

あとはスクロールに左右されず画面いっぱいに表示されるように指定しています。

CSSの7行目の max–width: 100%!important; はちょっとださいのですが、コンテンツ全てに対し max–width: 1160px; を指定しているため、それを無視して画面いっぱいに表示させるために記載しました。

モーダル表示する画像のは、中央寄せで、画面に対し縦横最大90%で表示する。（めちゃくちゃ横長の画像は無視しました。）

jQueryの2～5行目は画像をクリックした場合の処理です。

$(this).prop(‘outerHTML’) でクリックした画像のHTMLを取得し、#graydisplay 内にコピーしています。

そして、$(“#graydisplay”).fadeIn(200); で200ミリ秒かけて表示します。

jQueryの6～8行目は、モーダル画面が開いたあとに閉じる処理です。

モーダル画面もしくは、モーダル画面に開いた画像をクリックすると200ミリ秒かけて消えるようになっています。

まとめ

モーダル画面ようのHTMLタグを用意する。

モーダル画面のデザインをCSSに定義する。

画像をクリックした場合や、モーダル画面を閉じる場合の処理をjQueryに書く。

モーダル画面を開き画像を表示するだけでしたら、たったこれだけのコードで出来ます。

プラグインを使えばもっとシンプルかもしれませんが、どういったコードで動くかをイメージできればプラグインももっと有効に活用出来ると思います。

コメントを残すコメントをキャンセル