Bootstrap4.5でのModalについて

お世話になっております。
Bootstrap4.0 + JQuery3.1.1で以下の様なカード形式からモーダル表示するhtmlにつきまして、
この度Bootstrap4.5 + JQuery3.5.1にアップグレードしたところ、
特にエラーを吐くわけでもなくモーダル表示が動かなくなってしまいました。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="ja">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>社員一覧</title>
    <link href="bootstrap.css" rel="stylesheet">
    <script src="modernizr-2.6.2.js"></script>
    <style type="text/css">
        .wrap {
	        overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="wrap">
    <div class="container-fluid body-content">
        <h5>社員一覧</h5>
        <div class="row my-flex-card">
            <div class="col-lg-3 col-md-4 col-sm-4">
                <div class="card card-col">
                    <div class="card-block">
                        <h6 class="card-title">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#1000">天堂 浬</button>
                        </h6>
                        <p class="card-text">080-1234-5678</p>
                        <p class="card-text">hoge1@gmail.com</p>
                        <div class="modal" id="1000" tabindex="-1" role="dialog">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">天堂 浬</h5>
                                    </div>
                                    <div class="modal-body">
                                        <ul class="list-group">
                                            <li class="list-group-item">住所：東京都世田谷区</li>
                                        </ul>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-link" data-dismiss="modal">閉じる</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-4">
                <div class="card card-col">
                    <div class="card-block">
                        <h6 class="card-title">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#1500">佐倉 七瀬</button>
                        </h6>
                        <p class="card-text">080-5678-1234</p>
                        <p class="card-text">hoge2@gmail.com</p>
                        <div class="modal" id="1500" tabindex="-1" role="dialog">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">佐倉 七瀬</h5>
                                    </div>
                                    <div class="modal-body">
                                        <ul class="list-group">
                                            <li class="list-group-item">住所：東京都千代田区</li>
                                        </ul>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-link" data-dismiss="modal">閉じる</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>        
    </div>
    </div>
    <script src="jquery-3.1.1.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap.js"></script>
</body>
</html>

modalを開く為のjavascriptは使用しておりません。
Bootstrap4.0ではmodal表示出来ていたのですが、4.5に変わったことにより何か追記すべきところがあるのか等、
色々と調べてみたのですが、現時点で八方塞がり状態です。
是非、ご指摘等頂戴できれば幸いです。
何卒よろしくお願い申し上げます。

退会済みユーザー

2020/05/22 07:05 編集

元に戻す・・・という選択肢はないのでしょうね。 ASP.NET の影響を一切排除して、html, javascript, css だけで問題を再現できるサンプルを書けるのであれば、それをアップして、純粋に Bootstrap4.5，jquery3.5.1 の質問として聞いてはいかがですか？　その方が回答が集まりやすいと思いますので。また、そういうサンプルを作る過程で問題の切り分けができるので、その過程で原因が見つかって自己解決できるということも期待できそうですし。 ASP.NET が絡むと、ASP.NET が分かる人に Bootstrap4.5，jquery3.5.1 を導入してもらって問題を再現してもらうという話になるかと思いますが、それはなかなか難しい話だと思います。実際自分はそこまでやる気力は沸いてきませんし。

masterofpuppets

2020/05/22 07:13

ご指摘誠にありがとうございます。 htmlベースで書いたものを、質問に追記させていただきます。それとも新規で質問を挙げた方がよろしいでしょうか。よろしくお願い申し上げます。

退会済みユーザー

2020/05/22 07:18

> それとも新規で質問を挙げた方がよろしいでしょうか。そのあたりは質問者さんのご自由にしていただいていいと思います。しばらく待ってレス・回答が付かなければ、ここはクローズして新規に質問した方がよさそうな気はしますが。

masterofpuppets

2020/05/22 08:01

返信が遅くなってしまい誠に申し訳ございません。 htmlで書き直し（勿論動く事を確認の上）、当初投稿させていただいた内容を編集させていただきました。何卒よろしくお願い申し上げます。

行動規範の内容に同意します

回答1件

自己解決

試行錯誤の末、下記の箇所を変更した結果、正常にmodal表示が出来ました。
0. data-target="#1000" → data-target="#modal1000"
0. <div class="modal" id="1000" tabindex="-1" role="dialog"> のidを"modal1000"

Bootstrap4.5ですと、どうも数値だと上手く動かないようです。

大変お騒がせして申し訳ございません。
以上、ご報告させていただきます。

投稿2020/05/22 17:30

masterofpuppets

総合スコア12