How to fix the "TypeError: $(...).modal is not a function" error?

In most cases, the TypeError … is not a function indicates a missing jQuery script. The script is either missing in general, i.e. it was not integrated in the header, or it is loaded too late, i.e. only after the actual script has already been called.

In the above example, however, it is the missing Bootstrap script, which can be added below.

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>