モーダルウィンドウの方法について

JQueryでモーダルウィンドウの実装を試しています。

html
1<!--表示させるボタン-->
2<section>
3 <div class="attend">
4プラン料金の詳細は<a id="open-reserve-page" class="orange ">こちら</a>
5 </div>
6</section>
7<!--予約プランの表示-->
8<section id="reserve" class=" reserve">
9  <div class="title"><h2>ご予約</h2><i class="material-icons close-btn"></i></div>
10     
11 ーー省略ーー
12
13</section>

js
1$(function(){
2    $('#open-reserve-page').on('click',function(){
3        $('#reserve').fadeIn();
4        return false;
5    });
6    $('.close-btn').on('click',function(){
7        $('#reserve').fadeOut();
8        return false;
9    });
10  
11});

CSS
1section#reserve{
2    display: none;
3    height: 100vh;
4    width: 100%;
5    z-index: 2;
6    position: fixed;
7}

かいてみたところ反応がなくクリックしても何も起きません。
※<head>内に

    <script type="text/javascript" src="(パス)"></script>

は記述済みです。

オーバーレイの設定をしていないからかも？と思いかきましたが反応がなかったので
jsの指定がおかしいのかと思いましたが原因が見つからず

他に思い当たる要因がじりきで見つけられず質問いたしました。
ご教授いただける方いましたら幸いです。

m.ts10806

2019/07/12 05:30

>クリックしても何も起きません。ブラウザデベロッパーツールのコンソールにエラーも出ていませんか？

退会済みユーザー

2019/07/12 05:31 編集

$('#open-reserve-btn')に対応する要素が質問文のコードに存在していません。

noricoonco

2019/07/12 07:43

ご指摘ありがとうございます。間違えていたid修正いたしました。

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

回答1件

ベストアンサー

#open-reserve-btnがHTML内にありません。

sectionr#reserve{

sectionrになっています

投稿2019/07/12 05:31

編集2019/07/12 07:45

m.ts10806

総合スコア80850

noricoonco

2019/07/12 09:30

ご指摘ありがとうございます。アップロードする際に書き換えていたら入力ミスしてしまいました、お手数おかけし申し訳ありません。挙動は変わらず、エラーもコンソールで確認できませんでした。

m.ts10806

2019/07/12 09:33

それでしたらaにhref与えてみては。ひとまず href="#" としておけば遷移は行われません。私の方ではそれでfadeInは起きました

noricoonco

2019/07/12 09:49

試してみましたが、変わらずでした。ということはscriptを読み込めていないということでしょうか？ <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="/assets/js/app.js"></script> </head> をHTMLファイルに記述しているのですが他に記述するものってあるのでしょうか・・？

m.ts10806

2019/07/12 10:04

デベロッパツールのコンソールにそのファイルに対する404エラーが出てないならファイルは読み込めていると思って良いです。

noricoonco

2019/07/12 10:14

そうなんですね！それは知らなかったので何回もパスを書き直してました。　 alert('OK'); を記述して確認したところJqueryの書き方にミスがあるみたいです。モーダルウィンドウの書き方が粗かったのだと思います、一度書き直してみます。ありがとうございました！

m.ts10806

2019/07/12 10:18

んん？ JavaScript側には特にミスはなかったですよ？私の回答とコメントの通りすればfadeInは動きます。

noricoonco

2019/07/12 10:38

href="#"の追加とidの指定があっているか確認しましたがなにも表示されずでした… CSSはdisplay:none;で合っていますよね。