スクロールした状態でモーダルを出すと見えない位置に出現してしまう

スクロールした状態でモーダルウィンドウを出すと見えない位置に表示されてしまうので、常に画面中央に出したい。

ヘッダーの『宿泊予約』ボタンをクリックするとモーダルが表示されます。

画面の上下左右中央に表示されるようにcssで調整しました。

しかし、画像全体を下にスクロールしてから『宿泊予約』ボタンをクリックすると、モーダルウィンドウが見えない位置に表示されてしまいます。。。

ググって自分なりに調べてみたのですが、常に画面中央にモーダルを表示する方法が見つけられず困っています・・・。

どなたかわかる方がいらっしゃいましたら教えていただけるととても助かります。

ログインID：kadan
パスワード：kadan

html
1 <!-- モーダルウィンドウ -->
2    <div id="mask" class="hidden"></div>
3    <section id="modal" class="hidden">
4
5      <!-- 宿泊予約 form -->
6      <form>
7        <!-- close -->
8        <span class="material-icons" id="close">close</span>
9        <p class="modal__title">宿泊予約</p>
10        <div class="modal__wrap">
11          <label class="modal__name">お名前</label>
12        </div>
13        <input class="modal__name__text" type="text" value="例：石井正悟">
14
15        <div class="modal__wrap">
16          <label class="modal__name">メールアドレス</label>
17        </div>
18        <input class="modal__email__text" type="email" value="例：Example@example.com">
19
20        <div class="modal__wrap">
21          <label class="modal__name">ご希望プラン（空いているプランのみ表示されます）</label>
22        </div>
23        <select class="modal__plan__text">
24          <option class="modal__plan" disabled selected value>プランを選択してください</option>
25          <option>①【期間限定】海辺の四季旬彩、贅沢美味懐石プラン</option>
26          <option>②平日に優雅に楽しむ、特別宿泊プラン</option>
27          <option>③絶景貸切露天と個室会席を満喫できるファミリープラン</option>
28        </select>
29
30        <div class="modal__wrap">
31          <label class="modal__name">日時選択</label>
32        </div>
33        <input class="flatpickr" type="text" value="日時を選択してください" placeholder="Select Date.." readonly="readonly">
34
35
36        <div id="submit">送信する</div>
37      </form>
38    </section>
39コード

css
1/* モーダル */
2#modal {
3  background: #fff;
4  width: 550px;
5  height: 600px;
6  padding: 29px 0 0 0;
7  position: absolute;
8  top: 0;
9  right: 0;
10  bottom: 0;
11  left: 0;
12  margin: auto;
13  transition: transform 0.7s;
14  z-index: 2;
15}
16
17#mask.hidden {
18  display: none;
19}
20
21#modal.hidden {
22  transform: translate(0, -1300px);
23}
24
25.modal__title {
26  font-size: 20px;
27  line-height: 1.7;
28  padding: 0 0 30px 0;
29  border-bottom: 1px solid #E7E7E7;
30  margin: 0 0 22px 0;
31  text-align: center;
32}
33
34#mask {
35  background: rgba(255, 255, 255, 0.4);
36  position: fixed;
37  top: 0;
38  bottom: 0;
39  right: 0;
40  left: 0;
41  z-index: 1;
42}
43
44#open {
45  cursor: pointer;
46  color: #fff;
47}
48
49#close {
50  position: absolute;
51  top: 20px;
52  right: 22px;
53  cursor: pointer;
54}
55コード

jQuery
1
2'use strict';
3{
4  const open = document.getElementById('open');
5  const close = document.getElementById('close');
6  const modal = document.getElementById('modal');
7  const mask = document.getElementById('mask');
8
9  open.addEventListener('click', () => {
10    modal.classList.remove('hidden');
11    mask.classList.remove('hidden');
12  });
13
14  close.addEventListener('click', () => {
15    modal.classList.add('hidden');
16    mask.classList.add('hidden');
17  });
18
19  mask.addEventListener('click', () => {
20    modal.classList.add('hidden');
21    mask.classList.add('hidden');
22  });
23
24  // header fixed
25  jQuery(window).on('scroll', function () {
26    if (jQuery('.header').height() < jQuery(this).scrollTop()) {
27      jQuery('.header').addClass('change-color');
28    } else {
29      jQuery('.header').removeClass('change-color');
30    }
31  });
32コード

行動規範の内容に同意します

回答1件

ベストアンサー

position: fixed;でどうでしょうか？
ヘッダーと被ってしまうのでその他の調整は良しなにお願いしますm(__)m

css
1#modal {
2  background: #fff;
3  width: 550px;
4  height: 600px;
5  padding: 29px 0 0 0;
6  position: fixed;/*← fixedに変更*/
7  top: 0;
8  right: 0;
9  bottom: 0;
10  left: 0;
11  margin: auto;
12  transition: transform 0.7s;
13  z-index: 2;
14}