Loading Bootstrap modal after delay not working

Question

I'm working on a cratejoy site, and my client needs a modal to popup after a set amount of time. I added the modal and when I use this it works fine:

$('#myModal').modal('show');

But when I try to use either of these answers from this page , it get a Uncaught TypeError: $(...).modal is not a function error and the modal does not popup. You can see it not working here .

Answer 1

You have multiple versions of jQuery being loaded

Apart from the obvious version with it's own script tag your main.js file also includes it.

Since it loads after bootstrap.js it overwrites the whole jQuery object and removes reference to bootstrap in original version. That is why you get the error shown

Choose which version of jQuery you want to use and remove the other.

Make sure boostrap.js loads after the selected choice

Answer 2

First of all you need to have link to bootstrap.js in your page and loaded after jquery.

Second you have to place the script in a script tag before the end body tag

$(document).ready(function(){
   $('#myModal').modal('show');
}); 

In order to delay the modal you can do this:

setTimeout(function(){
    $('#myModal').modal('show');
}, 5000)