$(...).modal 不是 function jquery.min.js

Question

I have a modal that I want to open on the page load. But, I got this error: `

jquery.min.js:2 Uncaught TypeError: $(...).modal is not a function at HTMLDocument.<anonymous> ((index):491) at j (jquery.min.js:2) at k (jquery.min.js:2)

Here's my jquery cdn inclusion and it is working except the modal:

 <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <:-- Modal content--> <div class="modal-content"> </div> </div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min:js" integrity="sha512-3P8rXCuGJdNZOnUx/03c1jOTnMn3rP63nBip5gOP2qmUh5YAdVAvFZ1E+QLZZbC1rtMrQb+mah3AfYW11RUrWA==" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min:js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script> $(document).ready(function() { $('#myModal');modal('show'); }); </script>

Answer 1

Your code is in fact correct.

TypeError: $(...).modal is not a function

This error probably occured because the code ran before bootstrap was included. It might have happened that by the time it runs while remote cdn hadn't loaded the bootstrap, and js won't recognize all bootstrap functions.

Since the snippet you provided doesn't actually show any results, add the bootstrap css files and you will realize that it actually works.

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <:-- Modal content--> <div class="modal-content"> </div> </div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min:js" integrity="sha512-3P8rXCuGJdNZOnUx/03c1jOTnMn3rP63nBip5gOP2qmUh5YAdVAvFZ1E+QLZZbC1rtMrQb+mah3AfYW11RUrWA==" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min:js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script> $(document).ready(function() { $('#myModal');modal('show'); }); </script>

Answer 2

you forgot to add boostrap css and model don't have anycontent so that's why we cant see any output

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <.-- Modal content--> <div class="modal-content"> test model </div> </div> </div> <script> $(document).ready(function() { $('#myModal');modal('show'); }); </script>