Bootstrap modal: is not a function

How to handle timing

The importance of patience

Before triggering the modal, check the DOM is fully ready for you. Impatience often results in calling the modal too soon. So, make use of $(document).ready() to save some embarrassment:

$(document).ready(function() {
    // Ladies and Gentlemen, we have liftoff.
    $('#myModal').modal('show'); 
});


Heavy content – a reason to hold back

If your modal is stuffed with heavy images or iframes, let the whole window load before unleashing it:

$(window).on('load', function() {
    // This modal ate too many polygons for breakfast
    $('#myModal').modal('show');
});


By waiting, you ensure that everything is fully loaded and rendered before the modal opens.

Be a detective: Troubleshooting

First clue: The console

Call upon your inner detective and open your developer tools console (press F12 or Ctrl+Shift+I). Keep an eye out for JavaScript errors. They may seem cryptic, but they can point you directly to the problem.

Suspects: Conflicting scripts

At times, other scripts or plugins could be conspiring against you, colliding with jQuery or Bootstrap's JavaScript. This could obscure the .modal() function. Minimizing the trigger to an isolated, minimal example can help pinpoint these ne'er-do-wells.

Last resort: Catching dependencies

Bootstrap's modal has its allies, known as dependencies. Ensure all accomplices required are present and correct by consulting the Bootstrap documentation for your version.

Advanced tips to level up

The small but mighty attributes

In your script tags, don't forget to use type="text/javascript" to state their content:

<script type="text/javascript" src="path_to_jquery.js"></script>


The safety net: fallbacks

The strength of a CDN can waver. When it does, be prepared with a fallback to a local copy of jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>if (!window.jQuery) { 
    // Now don't we like to be prepared?
    document.write('<script src="local_path_to_jquery.js"><\/script>'); 
}</script>


Modals on mobile: the final frontier

Be aware, different mobile browsers or devices can respond differently to Bootstrap modals. Be mindful of viewport settings and possible touch event interference.