bootstrapを用いたmodalの使い方について質問です

Question

WEBページ制作にbootstrapを使用してmodalを表示させたいのですが、該当のボタンをクリックすると画面全体はグレイオーバーになるのですが、肝心のポップアップが表示されません。
JavaScript内に入れたJQueryがエラーになっているので、これがポップアップがうまく表示されない原因だと思うのですが、解決方法をご存じの方はいらっしゃいませんでしょうか？

もしくはHTMLのheadにscriptタグを書いてjQueryを使用することは明記しているのですが、ここの部分が間違っているのでしょうか？

下記がHTMLのmodalを使用してするログインフォームです。

<!-- navigation list -->
          <ul class="navbar-nav" id="list">
            <li class="nav-item"><a class="nav-link" href="#about_link">About us</a></li>
            <li class="nav-item"><a class="nav-link" href="#promo_link">Promotion</a></li>
            <li class="nav-item"><a class="nav-link" href="#contact_link">Contact Us</a></li>
            <li class="nav-item"><a class="nav-link" href="listing.html">Room List</a></li>
          </ul>
          <button type="button" class="btn btn-default btn-lg" id="login_myBtn">Login</button>
            <button type="button" class="navbtn btn-info btn-lg" id="signup_myBtn">Sign Up</button>
        </div>
      </nav>
      </div>

<!--- SIGN UP AND LOG IN ------------------------------>
      <div class="header-container hidden">
<!--------------- START LOGIN FORM -------------------->

 <!-- Modal -->
 <div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
  
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header" style="padding:35px 50px;">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
      </div>
      <div class="modal-body" style="padding:40px 50px;">
        <form role="form">
          <div class="form-group">
            <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
            <input type="text" class="form-control" id="usrname" placeholder="Enter email">
          </div>
          <div class="form-group">
            <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
            <input type="text" class="form-control" id="psw" placeholder="Enter password">
          </div>
          <div class="checkbox">
            <label><input type="checkbox" value="" checked>Remember me</label>
          </div>
            <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
        </form>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
        <p>Not a member? <a href="#">Sign Up</a></p>
        <p>Forgot <a href="#">Password?</a></p>
      </div>
    </div>

上記３つのどこか（またはすべて）において何かしら問題があると思うのですが、教えていただけると嬉しいです。
よろしくお願いします。

Answer 1

エラーと言うより「非推奨」という意味合いになるかと思います。

.ready()

As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated. This is because the selection has no bearing on the behavior of the .ready() method, which is inefficient and can lead to incorrect

.clickもどちらかというと.on('click',…)の形式のほうが良いと思います。

あとモーダル開くなら、引数にオプションが必要では？
Bootstrap4 - Modal#Methods
$('#targetId').modal('show')

「任意のタイミングで発生させたい」のではなく「ボタンクリック」など決まったタイミングならそのボタンに data-toggle="modal" data-target="#targetId"を当てたほうが楽かと思います。

Comments

[CANMIZ]

回答くださり、本当にありがとうございます！！！

JQueryを下記に書き換えました。
$(document).on('ready', function () {
$('#login_myBtn').on('click', function () {
$('#myModal').modal('show');
});

そしてログインボタンのコードを下記に変更しました。
<button type="button" class="navbtn btn-info btn-lg" id="login_myBtn" data-toggle="modal" data-target="#myModal">Login</button>

ただ、これでもまだモーダルが表示されません。
知識が足りず申し訳ないのですが、何か他に変更すべきところがあればご教示いただけないでしょうか？

[m.ts10806]

data属性にするならclickイベントは不要です。どちらかだけ。
あとはドキュメントも確認してください。

[m.ts10806]

んー。こういう書き方はしないかな。
>$(document).on('ready', function () {

$(function () {

だけで良いです。

[CANMIZ]

早速のご返答、ありがとうございます！

下記のjQueryを用いたまま、HTMLを修正したら解決しました！
$('#login_myBtn').on('click', function () {
$('#myModal').modal('show');
});

HTML内にある<div class="header-container hidden">と</div>を削除したら、モーダルが表示されるようになりました。（なぜなのかは不明なのですが、このdivは必要なのかな～と何気なく削除したことがきっかけでした。）
コメントしてくださりありがとうございます☆

[m.ts10806]

>なぜなのかは不明なのですが、
hiddenを当てているからでは。
それぞれのクラスには意味や役割がありますので、なんとなくではなく、ドキュメントや仕様確認して対応しましょう。
今回の回答にはjQuery、bootstrapのドキュメントへのリンクがあります。
そちら確認するだけで解決することも多いですよ。

[m.ts10806]

ただ、先にかいたように「特定のボタンで特定のモーダル」ならJavaScript書く必要はないのです。これもドキュメントのとおり。

Answer 2

下記のjQueryを使用

$('#login_myBtn').on('click', function () {
$('#myModal').modal('show');
});

HTML内にある<div class="header-container hidden">と</div>を削除