BootstrapのモーダルがJavaScriptで表示できないときに確認すべき事項!

JavaScript

Bootstrapのモーダル制御は、
HTML内のみで完結することができますが、
用途によっては、JavaScript内で制御したい場合が出ると思います。

今回は、モーダル表示をするときにJavaScriptで
制御できない場合の対処法を記しました。

したいこと

HTMLの要素をクリックして
モーダルを表示させるという処理。

JavaScriptで処理をしたい場合です。

上記の画像のようにモーダルを表示をさせたいです。

しかし、これがうまくJSで制御できず、
エラーが出てしまいます。

私は、Vue.jsをしようしているので拡張子がvueになっていますが、気にしないでください。

これを見ると、jQueryが読み込まれていないのでは?
と思ってしまいます。

では、このエラーの解決法を見ていきましょう。

 

TypeError:$(…).modal is not a functionと表示されたら?

jQueryを読み込んでいるか?

Bootstrapでアニメーションなど動きを出すコンポーネントでは、JavaScriptが必要です。

 

多くのコンポーネントでは、JavaScriptを使用して機能させる必要がある。具体的には、jQueryPopper.js、独自のJavaScriptプラグインが必要。

引用:Bootstrap4移行ガイド

 

jQueryを読み込む必要があると公式ドキュメントにも
明示してあります。

 

バージョンに関しては、Bootstrapとの兼ね合いがありますが、
公式のドキュメントを参考にして探してみてください。

Popper.jsに関しては、今回のモーダル表示には関わらないので、
あまり気にしなくて大丈夫ですが、
念のためにCDNとして設置しても良いでしょう。

上記をhead内に読み込ませれば
恐らくモーダルが機能するでしょう。

これで試してみてください。
それでもうまくいかない方は、

読み込む順番が違う

実は、読み込む順番がかなり大切です。

以下の <script> をページの終わり近くにある </body> タグの直前に置いて有効にする。最初にjQueryが来て、Popper.js、それからJavaScriptのプラグインが来なければならない。

引用:Bootstrap4移行ガイド

公式ドキュメントに記載してある通り、
jQuery > Popper.js > bootstrap.min.js

の順で読み込む必要があります。
私は、これが原因でした。

実行させてみると動くと思います。

それでも動かない場合は?

上記の二つの方法で動かない場合は、

  • jQuery、Bootstrapのバージョンチェック
  • 制御しているモーダルのソースコードに不備はないか
  • jsで指定しているIDに間違いはないか
  • http://XXXX,https://XXXX~を //XXXXXXにしてみる

上記の中に該当するものがあれば、
動かない可能性が高いです。

ぜひチェックしてみてください。

エラーですぐ詰まってきつい

エラーが起きて検索して解決。
またエラー、検索、解決。
実際のところ、この繰り返しなのです。

独学で勉強をしていると周りで助けてくれる人がおらず
かなり苦しいと思います。

「侍エンジニア塾」のプログラミング学習サービスでは、
独学では難しい完全オリジナルアプリの開発や、
人工知能学習スマホアプリなどをつくることが可能です。

 

未経験から、IT業界でエンジニアとして就職したい方は、
ぜひ、侍エンジニア塾 無料体験レッスンの詳細をご覧ください!

おわりに

Bootstrapは、数多くのサービスでも使われており
非常に簡単にデザインを作成できます。

大変便利なので、私もBootstrapの勉強を続けます。
最後まで読んでいただき、ありがとうございました。

 

コメント

スポンサーリンク




タイトルとURLをコピーしました