あきぞらです。
Bootstrapを使ってフロントを開発していたのですが、
とある問題に遭遇しました。
モーダルが表示されたと思ったら、すぐに消えてしまう。
遭遇したときは「？？？」となったのですが、
調べるとすぐに解決したので、解決方法を書いていきます。
モーダルがすぐ消える事象
1回目、2回目は出したり消したりしても大丈夫なのですが、
3回目くらいに表示させようとすると「ヒュッ」と消えてグレーの背景だけが残る。
何かのバグだと思ってコンソールを開いてみるも、
何もエラーは表示されず。
モーダルがすぐ消える事象の原因
真因は分からないままですが、
原因はどうやら「モーダルプラグインが2回読み込まれている」ことのようでした。
参考にさせていただいたサイトはこちら。
モーダルがすぐ消える事象の対策
というわけで、
Bootstrap系のモジュールが重複して読み込まれていないかを確認してみます。
探してみると怪しいものがありました。
https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.27/bootstrap-native-v4.min.js http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js
一番最後のやつが怪しそう。
とくに使用されていなさそうだったので削除してみると、、解消されました！
Bootstrapはむやみやたらにインクルードしてはいけないですね。