jQueryで画像のフェードアウトができない

前提・実現したいこと

Webページで、画像のサムネイルクリックで画像がポップアップで拡大表示、
画像のクリックでフェードアウトして元のサムネイル画面に戻るようにしたいです。
ですが画像が全画面に表示された後、どこをクリックしても画像がフェードアウトしません。

popupBackgroundのCSSが効いていないようで、
background-colorを何に変えても変わらない状況です。

該当のソースコード

photo.html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8" />
5    <!-- 検索不可 -->
6    <meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW" />
7    <meta name="viewport" content="width=device-width">
8    <!--　jQuery読み込み -->
9    <script src="./jquery.js"></script>
10    <!-- javascript読み込み -->
11    <script type="text/javascript" src="./script.js">
12    </script>
13    <!--　CSS読み込み -->
14    <link rel="stylesheet" href="../css/styleSheet1.css">
15
16    <title>PHOTO</title>
17</head>
18
19<body>
20    <!-- ヘッダ -->
21    <div id="out"></div>
22
23    <div id="contents">
24        <p class="title">PHOTO</p>
25        <!--画面表示用画像-->
26        <a href="../images/Image1.jpg" class="photo">
27            <img src="../images/Image1.jpg">
28        </a>
29        <!--ポップアップ表示用画像と背景-->
30        <div id="popupBackground">
31        </div>
32        <img id="popupItem" src="">
33    </div>
34</body>
35</html>

js
1
2(function($){  
3    // ポップアップ用のタグを消す
4    $('#popupBackground').hide();
5    $('#popupItem').hide();
6    
7    // class「photo」のリンクがクリックされた時のイベント定義
8    $('.photo').bind('click', function(e){
9        // aタグのデフォルト動作を無効にする
10        e.preventDefault(); 
11 
12        // 画像の読み込み
13        var img = new Image();
14        // クリックされたaタグのhrefを取得する
15        var imgsrc = this.href;
16        
17        // Image()のロードイベントを定義する
18        $(img).load(function(){
19            $('#popupItem').attr('src', imgsrc);
20            // ポップアップで表示するためのimgタグに画像が読み込まれているかチェックする
21            $('#popupItem').each(function(){
22                // 読み込み済みならばポップアップ表示用の関数を呼び出す
23                if (this.complete) {
24                    imgload(img);
25                    return;
26                }
27            });
28            // imgタグのロードイベントを定義
29            $('#popupItem').bind('load', function(){
30                // 画像がロードされたらポップアップ表示用の関数を呼び出す
31                imgload(img);
32            });
33            
34        });
35        // Image()に画像を読み込ませる
36        img.src = imgsrc;
37    });
38    
39    // ポップアップされた領域のクリックイベント
40    $('#popupBackground, #popupItem').bind('click', function(){
41        // ポップアップを消すため、タグをフェードアウトさせる
42        $('#popupBackground').fadeOut();
43        $('#popupItem').fadeOut();
44        
45    });
46    
47    // ポップアップ表示用関数
48    function imgload(imgsource){
49        // ポップアップの背景部分を表示する
50        $('#popupBackground').fadeIn(function(){
51            // 画像を中心に表示させるため、画像の半分のサイズを取得
52            var item_hieght_margin = (imgsource.height / 2) * -1;
53            var item_width_margin = (imgsource.width / 2) * -1;
54            
55            // 取得したマージンと画像のサイズをCSSで定義する
56            var cssObj = {
57                marginTop: item_hieght_margin
58                , marginLeft: item_width_margin
59                , width: imgsource.width
60                , height: imgsource.height
61            }
62            // 画像の表示用タグにCSSを当て、表示を行う
63            $('#popupItem').css(cssObj).fadeIn(100);
64        });
65    }
66})

CSS
1
2 #popupBackground {
3    position: fixed;
4    margin: 0;
5    padding: 0;
6    background:#000;
7    width: 100vw;
8    height: 100hw;
9    opacity: 0.6;
10    z-index: 100;
11}
12
13#popupItem {
14    position: fixed;
15    margin: auto;
16    z-index: 101;
17
18}
19
20/*画像*/
21.photo img {
22    width: 9vw;
23    max-width: 9vw;
24    max-height: 200px;
25    /*縦に合わせてトリミング*/
26    object-fit: cover;
27    /*フォーカスする場所を決める*/
28    object-position: 1% 15%;
29}
30