JavaScript モーダルウィンドウが開かない

実現したいこと

クリックでモーダルウィンドウを表示したい（#popupなしで）

発生している問題・分からないこと

モーダルウィンドウがクリックしても開かず、URLの末尾に「#popup」をつけることで開きます。何故クリックが効かないのか、原因を知りたいです。調べたところ、window.location.hash(URL操作)が必要なようですが、理解が難しく、一般的にモーダルウィンドウの実装にそのようなコードが必要なのか？についても気になります。(ちなみに、エラーは特に出ていません)

該当のソースコード

JavaScript
1'use strict';
2
3{
4  const openBtns = document.querySelectorAll('.works__thumbnail-link');
5  const close = document.querySelector('.close-btn');
6  const modal = document.querySelector('#popup');
7  const mask = document.querySelector('.popup-overlay');
8  
9  openBtns.forEach(open => {
10    open.addEventListener ('click', (e) => {
11      e.preventDefault();
12      modal.classList.remove('hidden');
13      mask.classList.remove('hidden');
14      document.body.style.overflow = 'hidden';
15      // モーダルを開いたときに背景スクロールを止める
16      // ※body(背景全体)にoverflow: hiddenを指定 
17      modal.querySelector('.popup-content').scrollTop = 0;
18      // ポップアップを開いた時に 内容のスクロール位置をリセット
19    });
20  });
21
22  close.addEventListener ('click', () => {
23    modal.classList.add('hidden');
24    mask.classList.add('hidden');
25    document.body.style.overflow = '';
26    // モーダルを閉じたときにスクロールを元に戻す
27    // ※空文字 '' で元のスタイルに戻る
28  });
29
30  mask.addEventListener('click', () => {
31    close.click();
32  });
33}

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4  <head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>PORTFOLIO</title>
8    <meta name="description" content="#">
9    <link rel="stylesheet" href="https://unpkg.com/ress@4.0.0/dist/ress.min.css">
10    <link rel="stylesheet" href="css/styles.css">
11  </head>
12
13  <body>
14    <div class="works__container">
15      <div class="works__item">
16        <div class="works__gallery">
17          <!-- サムネイル画像 -->
18          <a href="#popup" class="works__thumbnail-link">
19            <img src="https://placehold.jp/300x200.png" alt="#" class="works__thumbnail">
20          </a>
21        </div>
22      
23        <!-- ポップアップ -->
24        <div id="popup" class="popup hidden">
25          <div class="popup-overlay"></div>
26          <!-- ポップアップ外のクリックを検知 -->
27          <div class="popup-content">
28            <!-- 画像 -->
29            <img src="https://placehold.jp/300x500.png"  alt="#" class="popup-image">
30            
31            <!-- 画像の説明 -->
32            <p class="works__caption-title">テスト<br>(テスト/テスト)</p>            
33            
34            <!-- 閉じるボタン -->
35            <button type="button" class="close-btn">閉じる</button>
36         </div>
37        </div>          
38      </div>
39    </div>
40
41    <script src="js/main.js"></script>
42  </body>
43</html>

CSS
1.works__container {
2  padding: 0 1.25rem;
3}
4
5.works__caption-title {
6  font-size: 1.2rem;
7  font-weight: bold;
8  text-align: center;
9  margin: 1rem;
10}
11
12.works__caption {
13  margin-bottom: 4rem;
14  font-size: 1rem;
15}
16
17.works__gallery {
18  display: flex;
19  flex-wrap: wrap;
20  justify-content: center;
21  margin-bottom: 2rem;
22  padding: 0 1rem;
23}
24
25.works__gallery img {
26  width: 100%;
27  max-width: 18.75rem;
28  height: auto;
29  object-fit: cover;
30  display: block;
31  margin: 0 auto 1rem;
32  transition: transform 0.3s ease;
33}
34
35.works__gallery img:hover {
36  transform: scale(1.05);
37}
38
39.works__item {
40  margin-bottom: 2rem;
41}
42
43.works__container > .works__item > img {
44  width: 100%;
45  object-fit: cover;
46  margin-bottom: 1rem;
47  padding: 0 1rem;
48}
49
50.popup {
51  position: fixed;
52  top: 0;
53  left: 0;
54  width: 100%;
55  height: 100%;
56  background-color: rgba(0, 0, 0, 0.6);
57  display: flex;
58  justify-content: center;
59  align-items: center;
60  z-index: 1000;
61  opacity: 0;
62  /* 初期状態は非表示 */
63  pointer-events: none;
64  transition: opacity 0.3s ease;
65}
66
67.popup:target {
68  opacity: 1;
69  pointer-events: auto;
70}
71
72.popup-overlay {
73  position: absolute;
74  top: 0;
75  left: 0;
76  width: 100%;
77  height: 100%;
78  background: transparent;
79}
80
81.popup-content {
82  position: relative;
83  background-color: #fff;
84  width: 90%;
85  max-width: 37.5rem;
86  max-height: 80%;
87  overflow-y: auto;
88  padding: 1.25rem;
89  border-radius: 10px;
90  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
91  text-align: center;
92  display: flex;
93  flex-direction: column;
94  gap: 0.9375rem;
95}
96
97.popup-image {
98  width: 100%;
99  height: auto;
100  border-radius: 5px;
101}
102
103.popup-description {
104  font-size: 1rem;
105  color: #333;
106  line-height: 1.5;
107  text-align: left;
108  padding-bottom: 1rem;
109}
110
111.popup-description strong {
112  font-weight: bold;
113  display: inline-block;
114  margin-bottom: 0.25rem;
115}
116
117.popup-url {
118  font-size: 1rem;
119  word-break: break-word;
120}
121
122.close-btn {
123  display: inline-block;
124  color: #333;
125  border: 1px solid #333;
126  border-radius: 3px;
127  padding: 0.0625rem 0.25rem;
128  font-size: 0.875rem;
129  text-decoration: none;
130  cursor: pointer;
131  transition: all 0.3s ease;
132  line-height: 1;
133  /* 縦方向の余白を詰める */
134  margin: 0 auto;
135}
136
137.close-btn:hover {
138  background-color: #f0f0f0;
139}
140
141.hidden {
142  display: none;
143}
144
145
146@media (max-width: 767px) {
147  .works__description {
148    margin: 1.5rem 1rem 2rem;
149  }
150
151  .works__title {
152    font-size: 2.5rem;
153    padding-top: 2.5rem;
154    padding-bottom: 1rem;
155    line-height: 1.2;
156    flex-direction: column;
157    align-items: center;
158  }
159
160  .works__gallery {
161    display: block;
162    padding: 0;
163  }
164
165  .works__gallery img {
166    width: calc(100% + 2rem);
167    margin: 0 -1rem 1.5rem;
168    max-width: none;
169  }
170}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

➀const openBtns = document.querySelector('.works__thumbnail-link');をconst openBtns = document.querySelectorAll('.works__thumbnail-link');にし、openBtns.forEach(open => {...でforEach構文に書き換えた。→変化なし
➁HTMLから#popupを削除し、href="#"→変化なし
➂<button class="works__thumbnail-link" type="button">→変化なし