現象
modalを用途によって表示するために、複数定義をしたあと、動作確認のためにmodalの表示を行ったら、既存のmodalが動かなくなった。。。
環境
jQuery v3.3.1 bootstrap v4.3.1
原因
おそらく、下記の箇所の記述で、画面上で1度に1個までが引っかかっている。
モーダルは画面上で1度に1個までしかサポートされません。ネスとされたモーダルはユーザー体験を低下させるためサポートしていません。
最初、読んだとき、ネストが1回までしかできないという解釈でいたが、modalの定義が1つしかできないという意味だった。。。
ドキュメントの読み違いって、しないように気をつけていても、してしまうものなんだなぁ～と思った。。。
だから、動作確認とセットでドキュメント読まないとダメだと思った。
ドキュメント書く際は、動作確認用のコードを埋め込むのは、とても重要。
ちなみに、今回自分が最初に定義していたmodalの定義は、以下の感じだった
<!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> ・・・ </div> <!-- <div class="modal fade" id="progressModal" tabindex="-1" role="dialog" aria-labelledby="progressModalLabel" aria-hidden="true"> ・・・ </div>
exampleModalとprogressModalを定義していたのが問題だった。。。
対策
modalの定義を1つにして、可変部分をjsのDOM操作で操作するように対応した。
modal表示用のメソッドをモーダルの種類ごとに用意して、モーダル表示したいときは、表示したいモーダルのメソッドを叩くようにしたら、うまく行った。
その際、モーダルの初期化（追加したDOM要素の初期化）処理をするようにしておく。
参考サイト
Modal - Bootstrap 4.2 - 日本語リファレンス
感想
また、くだらないことで１日ちかく悩んでしまった。。。
もうちょい、スマートにやれるような気がするが、個人のプロダクトで起きたので、泥臭くてもいいから対応した。
