HTML/CSS

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

あきぞらです。

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

では、また。

-HTML/CSS
-,

Copyright© あきぞらてっく , 2022 All Rights Reserved Powered by AFFINGER5.