質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

3326閲覧

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

seakai

総合スコア24

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/04/09 08:18

編集2021/04/09 08:54

前提・実現したいこと

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

画面をリロード後、モーダル内をクリックすると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で書いています。

追記

参考サイト

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

回答2

0

ベストアンサー

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

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

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

seakai

2021/04/09 09:11

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

0

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

投稿2021/04/09 08:47

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問