bootstrap の Modal を js で扱う時、 hide()すると黒い半透明の背景が残ることがある

bootstrap の Modal を js で扱う時、 hide() すると黒い半透明の背景が残ることがある。
結論から言うと、サンプルコード のボタンでモーダルを表示させていたことが原因だった。

↓原因

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

js で Modal を扱う時、
モーダルを表示する時は js 内で show() を呼んであげないといけない。
但し、閉じる時は js 内で hide() しても、元から用意されている閉じるボタンを使っても同じ挙動っぽい。

以下サンプルコード

import { Modal } from 'bootstrap/dist/js/bootstrap.esm.min.js'

let modal = document.getElementById('modal')
let modalObj = new Modal(modal)
let btnShow = document.getElementById('btnShow')
let btnSave = document.getElementById('btnSave')

// <button type="button" id="btnShow">開く</button>
btnShow.addEventListener('click', (e) => {
	modalObj.show()
})

// <button id="btnSave" type="button" class="btn btn-primary">Save changes</button>
btnSave.addEventListener('click', (e) => {
	// 何か処理する
	// ~~~
	// 最後に hide() で閉じてみる
	modalObj.hide()
})

<button type="button" id="btnShow">開く</button>

<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button id="btnSave" type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>