Q:

bootstrap trigger modal from javascript function give Uncaught TypeError: $ is not a function

I know it is a "famous" issue but I am still fighting with it.
Uncaught TypeError: $ is not a function
I call my scripts in head (also tried at the bottom just before the end of html, but I have onload functions!):
<script type="text/javascript" src="/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/functions.js"></script>

In my function.js file: 

$('#ModalEmailAlert').modal();

And I tried also

jQuery(document).ready(function($) {  $('#ModalEmailAlert').modal();
  });

function OpenModal(ModalName){
    jQuery(document).ready(function($) {
        $('#'+ModalName).modal();
    });
}

I also tried to call jquery from cdn (google and jquery) but at the moment call it from my website to make sure it comes first and complete.
Any help will be appreciate. Thanks

A:

Try this out, if your applciation structure is as below

index.html

js

jquery-1.12.4.min.js
bootstrap.min.js
functions.js

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <script type="text/javascript" src="js/functions.js"></script>
Hope this will help you.
You can't have the below code like this
function OpenModal(ModalName){
  jQuery(document).ready(function($) {
    $('#'+ModalName).modal();
  });
}

Change it to
jQuery(document).ready(function($) {
  function OpenModal(ModalName){
    $('#'+ModalName).modal();
  }

  OpenModal('modal1');
});

Or else 
Add an onclick event in HTML
Eg: <button type="submit" onclick="OpenModal('modal1')">Open Modal</button>

