【jQuery】クリックした画像が画面いっぱいに表示されるモーダルの作り方

うーくん

jQueryを使って、クリックした画像が画面いっぱいに表示されるモーダルを作りたい!!

この記事ではこんな要望にお答えします。

jQueryってなぜか難しいイメージありませんか?

僕も初めはそうでしたが、慣れれば簡単です。

モーダルを作成する方法は、

  • 背景(オーバーレイ)を作成
  • クリックされた後の拡大画像を作成(モーダルウインドウ)
  • jQueryで動きをつける

です。

順番に説明します。

完成形

まずは、完成後のページについては次の画像のとおりです。

これを作ります。

クリック前の画像
クリック後の画像

上の画像をクリックすると、下の画像のように画面いっぱいのグレーの背景で、画像が拡大されます。

モーダルの背景となるオーバーレイの作成

今回は、分かりやすいように画像だけが表示された簡単はページです。

HTMLはつぎのとおり。

【HTML】
 <div class=”image”>     
   <img src=”./img/jq.jpg” alt=”画像です”>   
 </div>

<!– オーバーレイ(背景) –>
    <div class=”overlay” id=”overlay”></div>

 <!– 拡大画像 –>    
 <div class=”modalwindow”>      
  <img src=”./img/jq.jpg” alt=””>  
  </div>

まず、画面いっぱいをおおう灰色の背景をCSSで作ります。

【CSS】
.overlay { 
 width: 100%; 
 height: 100%;
   background:rgba(0,0,0, 0.5); 
 position: fixed; 
 top: 0;  
left: 0; 
display: none;  
z-index: 10;
}

これで、画面いっぱいをおおう灰色の背景ができました。

ポイントは、 最初は表示されないように「display: none;」をつけておくこと。

クリックした後の拡大画像(モーダルウインドウ)の作成

次に、クリックした後の拡大画像(モーダルウインドウ)の作成です。

【CSS】
.modal-window{ 
 position: fixed;  
top: 50%;  
left: 50%;  
transform: translate(-50% ,-50%); 
 width: 50%;  
z-index: 11;  
display: none;}

top: 50%;  left: 50%;   transform: translate(-50% ,-50%); は中央配置するための記述です。

背景より画像は上に表示させるので、Z-indexは背景より大きい数字(11)になっています。

これで準備が整いました。

jQuery で拡大画像を表示させる

最後に、 jQuery でクリックしたら拡大画像を表示させます。

【js】
$(function () {  
 $(‘.image’).click(function () {   
   $(‘#overlay, .modal-window’).fadeIn();  }); 
  $(‘#overlay, .modal-window’).click(function () { 
   $(‘#overlay, .modal-window’).fadeOut(); 
  });
});

クラスがimageの画像がクリックされたら、オーバーレイとモーダルをフェイドイン(表示)してね。

表示されているオーバーレイとモーダルがクリックされたら、画像を閉じてね。

とのコードになってます。

応用としては、閉じるボタンを用意し、閉じるボタンがクリックされたら、画像が閉じるという動作も作れます。

モーダルの作り方まとめ

jQueryは一度理解してしまえば、難しくはありません。

なんか難しそう。。と思いますが、じっくり見てみると、思ったほど難しくないので、ぜひ実装してみてください。