【Bootstrap】モーダルが表示されたと思ったらすぐ消える事象が発生したときの対応！

あきぞらです。

Bootstrapを使ってフロントを開発していたのですが、

とある問題に遭遇しました。

モーダルが表示されたと思ったら、すぐに消えてしまう。

遭遇したときは「？？？」となったのですが、

調べるとすぐに解決したので、解決方法を書いていきます。

モーダルがすぐ消える事象

1回目、2回目は出したり消したりしても大丈夫なのですが、

3回目くらいに表示させようとすると「ヒュッ」と消えてグレーの背景だけが残る。

何かのバグだと思ってコンソールを開いてみるも、

何もエラーは表示されず。

モーダルがすぐ消える事象の原因

真因は分からないままですが、

原因はどうやら「モーダルプラグインが2回読み込まれている」ことのようでした。

参考にさせていただいたサイトはこちら。

366 Service

ブートストラップモーダルがすぐに消える

http://www.366service.com/jp/qa/87839b39e8adba8ee811e4ac3a4a62da

366 Service

ブートストラップモーダルが表示された直後に消える

http://www.366service.com/jp/qa/f1dcacb9b84138c41e9db84582a75f4c

モーダルがすぐ消える事象の対策

というわけで、

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はむやみやたらにインクルードしてはいけないですね。