bootstrapでモーダルが表示されない

bootstrapでモーダルを表示させたいのですが、ボタンを押してもモーダルが開きません。
コンソールには何もエラーが吐かれておらず、原因はわかりません。
コンソールで$('#detailContactModal').modal()とうつと下のようになりました。

console
1$('#detailContactModal').modal()
2=>
3{
4    "0": {
5        "jQuery3510105432359378303311": {
6            "events": {
7                "show": [
8                    {
9                        "type": "show",
10                        "origType": "show",
11                        "guid": 1,
12                        "namespace": "bs.modal"
13                    }
14                ]
15            }
16        }
17    },
18    "length": 1
19}
20

html
1<html>
2  <body>
3    <a class="btn btn-secondary" data-toggle="modal" data-target="#detailContactModal">詳細</a>
4
5    <div class="modal fade" id="detailContactModal" tabindex="-1" role="dialog">
6      <div class="modal-dialog modal-dialog-centered" role="document">
7        <div class="modal-content">
8          <div class="modal-header">
9            <h5 class="modal-title">詳細</h5>
10            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
11              <span aria-hidden="true">&times;</span>
12            </button>
13          </div>
14          <div class="modal-body"></div>
15          <div class="modal-footer">
16            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
17            <input type="submit" class="btn btn-secondary"/>
18          </div>
19        </div>
20      </div>
21    </div>
22  </body>
23</html>
24
25<script>
26  $('#detailContactModal').on('show.bs.modal', function (event) {
27    $('#myInput').trigger('focus');
28  })
29</script>
30
31