Q&A
回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。後から見た人から見て、現在回答されておられる方の回答が「無いコードに対しての指摘」になり、意味がわからなくなります。
前提・実現したいこと
buttonをクリックすると、modalでクラス名modalを表示させたいです
その上で、まず私はクリックすると、"_modal"を追加させるようにします。
CSSで"_modal"がついたときのCSSを設定させるようにしています
※なお、下記を変更しました
HTML（modalの部分のみ、変更しました）
CSS(一度、CSSをすべて消し、変更しました）
js (修正した箇所です:click時の部分に class名:modalを書きましたがいったん消しました）
発生している問題・エラーメッセージ
現状は、クリックしても"_modal"もついたり消えたりしません。
試したこと
・class名間違いの確認。
"_modal"がつくClass名のCSSとjsの確認。
該当のソースコード
HTML（modalの部分のみ、変更しました）
1<!DOCTYPE html> 2<html lang="jp"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>石井花壇|温海温泉旅館【公式サイト】</title> 8 <meta name="description" content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的な「和」の息づく空間で、至極のひとときをお過ごしください。"> 9 <link rel="stylesheet" href="./css/destyle.css"> 10 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> 11 <!--flatpicker--> 12 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> 13 <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> 14 <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script> 15 <link rel="stylesheet" href="./css/style.css"> 16 17</head> 18<body> 19 <header class="header"> 20 <div class="header-inner"> 21 <div class="header-left"> 22 <h1 class="logo"> 23 <a href="#"> 24 <img src="/img/top-header-logo.png" alt=""> 25 </a> 26 </h1> 27 28 <nav class="nav drawer-nav"> 29 <ul class="header-list"> 30 <li class="header-item"> <a href="./Room/room.html">お部屋</a></li><!-- /.header-item --> 31 <li class="header-item"> <a href="./Menu/menu.html">お料理</a></li><!-- /.header-item --> 32 <li class="header-item"> <a href="./Onsen/onsen.html">温泉</a></li><!-- /.header-item --> 33 </ul><!-- /.header-list --> 34 </nav><!-- /.nav --> 35 <div class="overlay"></div><!-- /.overlay --> 36 </div> 37 <div class="header-right"> 38 <div class="header-link " id="js-modal"> 39 <a class="calender-link js-modal-open" href="#"> 40 <!-- <img src="./img/calender.png" alt="カレンダー"> --> 41 宿泊予約 42 </a> 43 </div><!-- /.header-link --> 44 45 <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する"> 46 <span class="line"></span ><span class="line"></span><span class="line"></span> 47 </button> 48 </div><!-- /.header-right --> 49 50 <!--modal --> 51 <div class="modal js-modal"> 52 <div class="modal__bg js-modal-close"></div><!-- /.modal__bg --> 53 <div class="js-modal-content"> 54 <hr class="bar"> 55 <!-- modal-form --> 56 <form class="form" id="js-form" action="x"> 57 <div class="form-inner"> 58 <figure class="form_img" id="js-close-calender"> 59 <!-- <img src="./img/close@2x.png" alt="✖ボタン"> --> 60 </figure><!-- /#js-close-calender --> 61 <h2 class="form-ttl">宿泊予約</h2><!-- /.form-ttl --> 62 63 <ul class="form-list"> 64 <!--1--> 65 <li class="form-item"> 66 <label for="name">お名前</label> 67 <input type="text" name="name" class="form_txt" placeholder="例.石井花壇"> 68 </li><!-- /.form-item --> 69 <!--2--> 70 <li class="form-item"> 71 <label for="mail">メールアドレス</label> 72 <input type="text" name="name" class="form_txt" placeholder="例.example@example.com"> 73 </li> 74 <!--3--> 75 <li class="form-item"> 76 <p class="form-plan">ご希望プラン(空いているプランのみ表示されます)</p><!-- /.form-plan --> 77 <select class="select-plan" name="宿泊プラン"> 78 <optgroup> 79 <option class="form_opption" value="hidden selected">プランを選択してください</option> 80 <option class="form_opption" value="1">➀【期間限定】海辺の四季旬彩、贅沢美味懐石プラン</option><!-- /.form_opption --> 81 <option class="form_opption" value="2">➁平日に優雅に楽しむ、特別宿泊プラン</option><!-- /.form_opption --> 82 <option class="form_opption" value="3">➂絶景貸切露天と個室会席を楽しむファミリープラン</option><!-- /.form_opption --> 83 </optgroup> 84 </select><!-- /# --> 85 </li><!-- /.form-item --> 86 <!--4--> 87 <li class="form-item"> 88 <label for="js-flatpickr">日時選択</label></li><!-- /.form-item --> 89 <input id="js-flatpickr" type="text" name="name" placeholder="日時を選択してください"> 90 </li> 91 </ul><!-- /.form-list --> 92 </div><!-- /.form-inner --> 93 </form><!-- /.form --> 94 <div class="form-close"> 95 <a href="#"> 96 送信する 97 </a> 98 </div><!-- /.form-close --> 99 </div><!-- /.modal-contents --> 100 </div><!-- /.modal --> 101 102 </div><!-- /.header-inner --> 103 </header><!-- /.header --> 104 <script src="js/jquery-3.6.0.min.js"></script> 105 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> 106 <!-- 日本語の言語ファイル --> 107 <script>flatpickr("#flatpickr",{locale:"ja"});</script> 108 <script src="js/script.js"></script> 109</body> 110</html>
CSS(一度、CSSをすべて消し、変更しました）
1 2.modal { 3 display: none; 4} 5 6.modal_modal { 7 height: 100%; 8 position: fixed; 9 top: 0; 10 left: 0; 11 width: 100%; 12} 13 14.js-modal_modal { 15 display: block; 16 width: calc(550px/1920px*100%); 17 height: calc(600px/1080px*100%); 18 background-color: #fff; 19 position: absolute; 20 top: 50%; 21 left: 50%; 22 margin-right: 20px; 23 border: 1px solid #707070; 24 -webkit-transform: translate(-50%, -50%); 25 transform: translate(-50%, -50%); 26 z-index: 100; 27} 28 29.js-modal_modal .modal__bg_modal { 30 background: rgba(0, 0, 0, 0.8); 31 height: 100%; 32 position: absolute; 33 width: 100%; 34} 35 36.js-modal_modal .modal__content_modal { 37 background-color: #fff; 38 top: 50%; 39 left: 50%; 40 -webkit-transform: translate(-50%, -50%); 41 transform: translate(-50%, -50%); 42 width: 60%; 43 position: relative; 44} 45 46.form { 47 display: none; 48} 49 50.form-ttl { 51 margin: 20px 0 0 0; 52 border: 0; 53 border-top: 1px solid #E7E7E7; 54} 55 56@media screen and (max-width: 992px) { 57 .form_img { 58 width: 18px; 59 height: 18px; 60 } 61}
js
1/* modal */ 2$(function () { 3 $('.js-modal-open').on('click', function () { 4 $(".js-modal, .modal__bg").toggleClass('_modal'); 5 $('.js-modal-content').fadeIn(); 6 return false; 7 }); 8 $('.js-modal-close').on('click', function () { 9 $('.js-modal').fadeOut(); 10 return false; 11 }); 12});
js
1/* modal */ 2$(function () { 3 $('.js-modal-open, .modal').on('click', function () { 4 $(".js-modal, .modal__bg").toggleClass('_modal'); 5 $('.js-modal-content, js-modal_modal').fadeIn(); 6 return false; 7 }); 8 $('.js-modal-close,js-modal_modal').on('click', function () { 9 $('.js-modal, js-modal_modal').fadeOut(); 10 return false; 11 }); 12});
※修正したverです。変更点はjs-modal_modalを,fadeIn,Out それから2個目のクリック時に加えました
修正内容が表示されていません。プレビューを確認しましょう。
回答1件
0
ベストアンサー
$('.js-modal-open','.modal', '.js-modal')はカンマが文字列ではないですかね？
投稿2021/10/15 01:30
総合スコア36163
ご回答ありがとうございます。
$(function () {
$('.js-modal-open , .modal').on('click', function () {
$(".js-modal, .modal__bg").toggleClass('_modal');
$('.js-modal__content').fadeIn();
return false;
});
$('.js-modal-close').on('click', function () {
$('.js-modal').fadeOut();
return false;
});
});
で反応しました。divtoolでtoggleClassが発揮していました。ですが、bg-color:whiteは反映されていませんでした。苦笑
また、もう一つお聞きしたいのですが
classセレクタとidセレクタは一緒に選択できないのですか？
, ('#js-modal')を追加すると、jsが動かなかったからです。
本当にいつもご回答ありがとうございますm(__)m
「('#js-modal')を追加すると、jsが動かなかった」とのことですが、どこに追加したのですか？
$('.js-modal-open , .modal')
中に、追加しました。
どういう風に書いたのかわからないですが、一緒に選択できないということはないです。
かしこまりました。もう一度、自分で調べてみます
因みに、上記のjsを変更しなおしたのですが、また動かなくなりました。解決方法わかりますか？
本当にいつもお世話になっております。m(__)m
.js-modal__content がないからではないですか？
ご回答ありがとうございます。
修正しなおしたものを上げなおします。
divttolでは反応しますが、bg-color:#fff;などは反映されていません汗
.js-modal_modal がないからではないですか？
ん？ご回答いただいたにもかかわらず、申し訳ないですが質問いたします。
CSSでは、設定済みです。jsでもfadeInに書きましたが、できませんでした。
.js-modal_modal がないからだと思いますが。
私の設定では、toggleClassで"_modal"をつけたり消したりさせています。
→_modalがついたときに、CSSが発揮されるようにしたいのですが、難しいでしょうか？
今、行ってみました。
わかったことは、HTMLに.js-modal_modalがないと表示されないようでした。
この結果を加味すると、上記のToggleでは難しいというかいしゃくでしょうか？
大変恐れ入ります！！
いいえ、CSSの書き方の問題だと思います。
そろそろ、CSSセレクタについてしっかり学んだ方がいいと思います。
http://www6.plala.or.jp/go_west/nextcss/reference/selector/selector.htm#class
ご回答ありがとうございます。
添付で教えていただいたサイトでは理解が難しかったのでこちらを調べ、学習しました。
うーんといった感じです。私としてはaタグなどをクリックしたときの:activeなのかな、と判断しましたが、わかりません
https://saruwakakun.com/html-css/reference/selector
クラスをつけた時にスタイルが変わりたいようにしたいのですから、クラスセレクタの話ですよ。
ご回答ありがとうございます。
別の方法で行うことにしました。
あなたの回答
tips
プレビュー
