Bootstrap 5系、モーダルがうまく動作しない場合

投稿日: 投稿者: Hideto GOTOコメントする

これは、初めてBootstrap 5を使ってみてモーダルで嵌った記録です。

経緯と現象

この辺やこの辺の情報を参考に、Bootstrapの.modalを設定してみたところ、モーダルが表示はされるがイマイチな状態になった。

  • モーダル以外の背景がグレーっぽくならない
  • モーダル以外の部分をクリックしても閉じない
  • モーダル部分の背景が透明（下の部分と区別しにくい）

4系に戻ろうかどうしようかと思いながら、試行錯誤を開始。

modal-content 忘れ

modalあたりのhtmlを確認していたら、.modal > .modal-dialog > .modal-content > .modal-body にするべきところが、.modal-content が抜けていた。（modal-dialog の直下に modal-header や modal-body がいた。）

モーダル部分の背景色は modal-content に設定されてたということで得心しました。ずっと modal-dialog に色がついていると思って調べていた…

jQuery を読み込み

Bootstrap 5系の最大の(?)ウリは「jQuery不要」だと思うが、そうはいってもページのカスタマイズではjQueryが便利ということで、jQueryを読み込むようにしていた。

その読み込みの順番が問題だった。

Bootstrap関係のJSより先にjQueryを読み込むと、どうやら上手く動かないっぽい（詳しい原因までは調べていない）。というわけで、Bootstrapの後でjQueryを読み込むようにしたら、モーダルが想定通りに動くようになった。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

こんな感じ。bootstrap.bundle.min.js の次に jquery-3.6.0.min.js を読み込んでいます。