WEBページ制作にbootstrapを使用してmodalを表示させたいのですが、該当のボタンをクリックすると画面全体はグレイオーバーになるのですが、肝心のポップアップが表示されません。
JavaScript内に入れたJQueryがエラーになっているので、これがポップアップがうまく表示されない原因だと思うのですが、解決方法をご存じの方はいらっしゃいませんでしょうか?
もしくはHTMLのheadにscriptタグを書いてjQueryを使用することは明記しているのですが、ここの部分が間違っているのでしょうか?
下記がHTMLのmodalを使用してするログインフォームです。
html
1<!-- navigation list --> 2 <ul class="navbar-nav" id="list"> 3 <li class="nav-item"><a class="nav-link" href="#about_link">About us</a></li> 4 <li class="nav-item"><a class="nav-link" href="#promo_link">Promotion</a></li> 5 <li class="nav-item"><a class="nav-link" href="#contact_link">Contact Us</a></li> 6 <li class="nav-item"><a class="nav-link" href="listing.html">Room List</a></li> 7 </ul> 8 <button type="button" class="btn btn-default btn-lg" id="login_myBtn">Login</button> 9 <button type="button" class="navbtn btn-info btn-lg" id="signup_myBtn">Sign Up</button> 10 </div> 11 </nav> 12 </div> 13 14<!--- SIGN UP AND LOG IN ------------------------------> 15 <div class="header-container hidden"> 16<!--------------- START LOGIN FORM --------------------> 17 18 <!-- Modal --> 19 <div class="modal fade" id="myModal" role="dialog"> 20 <div class="modal-dialog"> 21 22 <!-- Modal content--> 23 <div class="modal-content"> 24 <div class="modal-header" style="padding:35px 50px;"> 25 <button type="button" class="close" data-dismiss="modal">×</button> 26 <h4><span class="glyphicon glyphicon-lock"></span> Login</h4> 27 </div> 28 <div class="modal-body" style="padding:40px 50px;"> 29 <form role="form"> 30 <div class="form-group"> 31 <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label> 32 <input type="text" class="form-control" id="usrname" placeholder="Enter email"> 33 </div> 34 <div class="form-group"> 35 <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label> 36 <input type="text" class="form-control" id="psw" placeholder="Enter password"> 37 </div> 38 <div class="checkbox"> 39 <label><input type="checkbox" value="" checked>Remember me</label> 40 </div> 41 <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button> 42 </form> 43 </div> 44 <div class="modal-footer"> 45 <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button> 46 <p>Not a member? <a href="#">Sign Up</a></p> 47 <p>Forgot <a href="#">Password?</a></p> 48 </div> 49 </div>
上記3つのどこか(またはすべて)において何かしら問題があると思うのですが、教えていただけると嬉しいです。
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/26 22:28 編集
2020/10/26 22:47
2020/10/26 22:48
2020/10/27 02:27
2020/10/27 02:38
2020/10/27 02:39