モーダル内をクリックするとリロード後1回目だけ閉じてしまう

前提・実現したいこと

クリックしても勝手に閉じないようにしたい。

画面をリロード後、モーダル内をクリックすると1回目だけ勝手に閉じてしまいます。
2回目以降はクリックしても閉じません。

ご教示いただけると幸いです。

該当のソースコード

html
1<div class="header-sp-right">
2      <nav class="header-sp-nav">
3        <ul class="header-sp-menu">
4          <li class="header-sp-room header-sp-menu-list"><a href="">お部屋</a></li>
5          <li class="header-sp-food header-sp-menu-list"><a href="">お料理</a></li>
6          <li class="header-sp-spa header-sp-menu-list"><a href="">温泉</a></li>
7        </ul>
8        <div class="header-sp-right-right">
9          <div class="header-sp-booking">
10            <a href="" class="js-modal-sp-open">
11              <div class="header-sp-booking-inner">
12                <img src="img/calender.png" alt="宿泊予約のカレンダー画像">
13                <p>宿泊予約</p>
14              </div>
15            </a>
16          </div>
17          <div class="ham" id="ham">
18            <span class="ham-line ham-line1"></span>
19            <span class="ham-line ham-line2"></span>
20            <span class="ham-line ham-line3"></span>
21          </div>
22        </div>
23      </nav>
24      <div class="modal-sp js-modal-sp">
25        <div class="modal-sp-bg js-modal-sp-close">
26          <div class="modal-sp-contents">
27            <div class="modal-sp-content-box">
28              <form action="">
29                <div class="name">
30                  <label for="name">名前</label>
31                  <input type="text" name="name" id="name" placeholder="例:田中太郎">
32                </div>
33                <div class="mail">
34                  <label for="mail">メールアドレス</label>
35                  <input type="mail" id="mail" name="mail" placeholder="例:Example@example.com">
36                </div>
37                <div class="form-select">
38                  <select name="select-menu" class="select-menu">
39                    <option value="one">1</option>
40                    <option value="two">2</option>
41                    <option value="three">3</option>
42                  </select>
43                </div>
44                <div class="submit">
45                  <input type="submit" value="送信">
46                </div>
47              </div>
48              <a href="" class="js-modal-sp-close">閉じる</a>
49              </form>
50          </div>
51        </div>
52      </div><!-- /.modal-sp -->
53    </div><!-- /.header-sp-right -->

scss
1.header-sp-right {
2
3    display: none;
4
5    @include sspc {
6
7      display: flex;
8    }
9
10    .header-sp-nav {
11      margin-right: 2em;
12
13      .header-sp-menu {
14
15        display: none;
16
17        @include sspc {
18          width: 30%;
19          height: 100vh;
20          display: flex;
21          flex-direction: column;
22          background-color: rgba(0, 0, 0, 0.16);
23          transition: 0.3s;
24          position: fixed;
25          z-index: 20;
26          top: 7em;
27          right: -40%;
28        }
29
30        &:first-child {
31          padding-top: 20px;
32        }
33
34        .header-sp-menu-list {
35
36          a {
37            display: block;
38            font-size: 21px;
39            color: #FFFFFF;
40            padding: 1em;
41          }
42        }
43      }
44
45      .header-sp-right-right {
46        display: flex;
47
48        .header-sp-booking {
49
50          a {
51            display: block;
52
53            .header-sp-booking-inner {
54              width: 13em;
55              height: 4.4em;
56              background-color: #978F10;
57              display: flex;
58              align-items: center;
59              justify-content: center;
60
61              img {
62                width: 2em;
63                height: 2em;
64                padding-right: 1em;
65              }
66
67              p {
68                font-size: 1.6em;
69                font-weight: bold;
70                line-height: 3;
71                color: #FFFFFF;
72              }
73            }
74          }
75        }
76
77        .ham {
78          display: none;
79          width: 5em;
80          height: 5em;
81          cursor: pointer;
82          position: relative;
83
84          @include sspc {
85            display: block;
86          }
87
88          .ham-line {
89            position: absolute;
90            left: 1em;
91            width: 3em;
92            height: 0.2em;
93            background-color: #FFFFFF;
94            transition: all 0.3s;
95          }
96
97          .ham-line1 {
98            top: 0.7em;
99          }
100
101          .ham-line1.open {
102            transform: rotate(45deg);
103            top: 2em;
104          }
105
106          .ham-line2 {
107            top: 1.9em;
108          }
109
110          .ham-line2.open {
111            width: 0;
112          }
113
114          .ham-line3 {
115            top: 3.2em;
116          }
117
118          .ham-line3.open {
119            transform: rotate(-45deg);
120            top: 2em;
121          }
122        }
123      }
124
125    }
126
127    .header-sp-menu.open {
128      right: 0;
129    }
130
131    .modal-sp {
132      display: none;
133      height: 100vh;
134      position: fixed;
135      top: 0;
136      left: 0;
137      width: 100%;
138
139      .modal-sp-bg {
140        background: rgba(0, 0, 0, 0.8);
141        height: 100vh;
142        position: absolute;
143        width: 100%;
144        z-index: 40;
145
146        .modal-sp-contents {
147          background: #FFFFFF;
148          padding: 1em;
149          position: absolute;
150          top: 50%;
151          left: 50%;
152          transform: translate(-50%, -50%);
153          width: 70%;
154
155          form {
156            padding: 6em;
157
158          }
159        }
160      }
161    }
162  }

javascript
1  $(function () {
2
3  //ハンバーガーメニュー開閉
4  $('.ham').on('click', function () {
5    $('.header-sp-menu, .ham, .ham-line1, .ham-line2, .ham-line3').toggleClass('open');
6  });
7
8  //ハンバーガーメニューのナビリンククリック後自動で閉じる
9  $('.header-sp-menu-list a').on('click', function () {
10    $('.ham').click();
11  });
12
13  //スクロールしたらヘッダーが変わる
14  window.addEventListener('scroll', function () {
15    var header = document.querySelector('header');
16    header.classList.toggle('scroll-nav', window.scrollY > 0);
17  });
18
19
20  //宿泊予約モーダル(SP)
21  $('.js-modal-sp-open').on('click', function () {
22    $('.js-modal-sp').fadeIn();
23
24    //ハンバーガーメニューをクリックしていても、宿泊予約がクリックされるとメニューが閉じる
25    $('.header-sp-menu, .ham, .ham-line1, .ham-line2, .ham-line3').removeClass('open');
26
27    return false;
28  });
29  $('.js-modal-sp-close').on('click', function () {
30    $('.js-modal-sp').fadeOut();
31
32    //しかし、.formをクリックでキャンセルさせる
33    $('form').on('click', function (e) {
34      e.stopPropagation();
35    });
36    return false;
37  });
38
39});

試したこと

「閉じるボタンか背景クリックでモーダルを閉じる」と書いていたjavascriptに、「formをクリックでキャンセルさせる」というコードを書き足しました。

補足情報（FW/ツールのバージョンなど）

scssで書いています。

追記

参考サイト

モーダルウィンドウをプラグインなしで作る
 モーダルウィンドウのブラックアウト部分をクリックで閉じる

Lhankor_Mhy

2021/04/09 08:24 編集

ご提示のコードを試してみましたが、問題が再現しませんでした。ご提示いただいていない部分に原因があると思われます。

yambejp

2021/04/09 08:25

modalは何のライブラリを想定していますか？

seakai

2021/04/09 08:49

Lhankor_Mhy様長くなりましたが、範囲を広くして提示させていただきました。よろしくお願い致します。

Lhankor_Mhy

2021/04/09 08:57

ありがとうございます。失礼しました、こちらの確認不足だったようです。検討いたします。

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

回答2件

ベストアンサー

このようにしてはいかがでしょうか？

js
1  $('.js-modal-sp-close').on('click', function () {
2    $('.js-modal-sp').fadeOut();
3
4    return false;
5  });
6
7  // ↓これを外に出す。
8  //しかし、.formをクリックでキャンセルさせる
9  $('form').on('click', function (e) {
10    e.stopPropagation();
11  });

投稿2021/04/09 09:01

Lhankor_Mhy

総合スコア36960

seakai

2021/04/09 09:11

リロードし、モーダル内をクリックしてもモーダルが閉じなくなりました！ありがとうございました。

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

modalで送信しているわけではないのですよね？
送信したらページ遷移されるのでモーダルは閉じるのは必然です。

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
3<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
4<script>
5$(function(){
6  $('.modal').hide();
7  $('.modal-open').on('click',function(){
8    $('.modal').dialog({
9    modal:true,
10    title:'入力',
11    buttons: { 
12      "送信": function() {
13        $(this).find('form').trigger('submit');
14      },
15      "閉じる": function() {
16        $(this).dialog("close");
17      }
18    }
19    });
20  });
21});
22</script>
23<input type="button" value="modal" class="modal-open">
24<div class="modal">
25    <form action="">
26      <div class="name">
27        <label for="name">名前</label>
28        <input type="text" name="name" id="name" placeholder="例:田中太郎">
29      </div>
30      <div class="mail">
31        <label for="mail">メールアドレス</label>
32        <input type="mail" id="mail" name="mail" placeholder="例:Example@example.com">
33      </div>
34      <div class="form-select">
35        <select name="select-menu" class="select-menu">
36          <option value="one">1</option>
37          <option value="two">2</option>
38          <option value="three">3</option>
39        </select>
40      </div>
41    </form>
42</div>
43