環境
- Windows10
- Google Chrome
発生している問題
Modalを表示したいと考えてBootstrapのガイドを読み、サンプルとして書いてあったコードをコピペしたのですが、ボタンをクリックしても何も起こりません。
ソースコード
html
1<!DOCTYPE html> 2<html lang='ja' dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test Modal</title> 6 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> 7 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 8 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> 9 <script type="text/javascript"> 10 $('#myModal').on('shown.bs.modal', function () { 11 $('#myInput').trigger('focus') 12 }) 13 </script> 14 </head> 15 <body> 16 <!-- 切り替えボタンの設定 --> 17 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 18 ココを押すと表示 19 </button> 20 21 <!-- モーダルの設定 --> 22 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 23 <div class="modal-dialog" role="document"> 24 <div class="modal-content"> 25 <div class="modal-header"> 26 <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5> 27 <button type="button" class="close" data-dismiss="modal" aria-label="閉じる"> 28 <span aria-hidden="true">×</span> 29 </button> 30 </div> 31 <div class="modal-body"> 32 <p>モーダルのコンテンツ文。</p> 33 </div> 34 <div class="modal-footer"> 35 <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button> 36 <button type="button" class="btn btn-primary">変更を保存</button> 37 </div><!-- /.modal-footer --> 38 </div><!-- /.modal-content --> 39 </div><!-- /.modal-dialog --> 40 </div><!-- /.modal --> 41 </body> 42</html> 43
どこがいけないのでしょうか?
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。