環境

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">&times;</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件

html
1    <script type="text/javascript">
2      $('#myModal').on('shown.bs.modal', function () {
3        $('#myInput').trigger('focus')
4      })
5    </script>

が実行されるときに、

html
1<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

が存在していないからですね

投稿2019/03/02 12:12

退会済みユーザー

総合スコア0

ベストアンサー

BootStrapはjQuery必須のフレームワークです。
基本的にプログラムは上から下に流れていくので、必須であるjQueryがあとに読み込まれていてはいけません。
ブラウザ開発ツールのコンソールに$ is undefinedのようなエラーが出ていませんか？
bootstrap.min.jsをjQuery本体のあとに読み込むように書いてください。

ただ、BootStrap本体はjQuery本体も含んでるものもあるのでバッティングしていないか、そこもブラウザ開発ツールのコンソールご確認ください。

※これとモーダルが正しく動くかは別問題ですが

投稿2019/03/02 03:04