Add Delay To Modal Launch

Forum Moderators: open

Message Too Old, No Replies

Add Delay To Modal Launch

almo136

3:31 pm on Aug 11, 2020 (gmt 0)

I am using the below code to launch a modal on page load:

 $("#rebrand").modal({
 escapeClose: false,
 clickClose: false 
 });

This works fine. I am trying to update this so there is a 3 second delay before the modal is displayed. I have tried this:

 setTimeout(function(){
 $("#rebrand").modal({
 escapeClose: false,
 clickClose: false 
 });
 },3000);

When doing this I get the error:
TypeError: $("#rebrand").modal is not a function. (In '$("#rebrand").modal({
escapeClose: false,
clickClose: false
})', '$("#rebrand").modal' is undefined)

Any ideas why this would be happening?

finco

9:54 pm on Aug 11, 2020 (gmt 0)

Is the JS code at the bottom of the page or in the <head> section?

almo136

10:04 pm on Aug 11, 2020 (gmt 0)

It’s at the bottom of the page.

finco

9:35 pm on Aug 12, 2020 (gmt 0)

Try this:
Open the website on a browser, after it loads, paste this code in your browser console and see if it works there. If it works there, then the issue is that your code is being executed before the page is done loading so to fix it, put the code in a document.ready function.

Like this:

$(document).ready(function() {
setTimeout(function(){
$("#rebrand").modal({
escapeClose: false,
clickClose: false
});
},3000);
});

almo136

1:42 pm on Aug 13, 2020 (gmt 0)

Unfortunately this doesn't work. Same issue even when wrapped in a document.ready function.

walemark

7:16 am on Aug 24, 2020 (gmt 0)

The $(…).modal is not a function is usually caused because scripts are loaded in the wrong order . The browser will execute the scripts in the order it finds them.

For example, bootstrap depends on jQuery , so jQuery must be referenced first. So, you must called the jquery.min.js and then bootstrap.min.js like the following:

<script src="/jquery-3.3.1.min.js"></script>
<script src="/bootstrap.min.js"></script>

Multiple jQuery instances

Sometimes this warning may also be shown if jQuery is declared more than once in your code. The second jQuery declaration prevents bootstrap.js from working correctly. The problem is due to having jQuery instances more than one time. Take care if you are using many files with multiples instance of jQuery. Just leave one instance of jQuery and your code will work.

[edited by: not2easy at 11:01 am (utc) on Aug 24, 2020]
[edit reason] Please see ToS [webmasterworld.com] [/edit]

almo136

8:21 am on Aug 24, 2020 (gmt 0)

I double checked and jQuery is only being loaded once and before the modal script. jQuery is getting loaded in the head and the script before </body>

The modal we are using is [jquerymodal.com...] (not bootstrap).