Bootstrap modal: is not a function
You have an issue in scripts order. Load them in this order:
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
$('#prizePopup').modal('show');
});
</script>
Why this? Because Bootstrap JS depends on jQuery:
Plugin dependencies
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).
how fix modal is not a function in vue.js?
Here is a similar issue: Bootstrap modal: is not a function
The reason for this problem was the wrong loading order of the scripts. Try to do this in that order
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ asset('js/app.js') }}" defer></script>
Uncaught TypeError: $(...).modal is not a function, can't manage proper order
Because you loaded JQuery thrice :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
You need to load JQuery once in a page, If you loaded JQuery more than once then you will face error, Why do I need to load jquery twice
bootstrap modal $(...).modal is not a function
You are using jQuery.noCoflict
Here is a jsFiddle
Use
jQuery.noConflict();
jQuery('#myModal') ....
Please tell me if it works or not.
UPDATE
As @dashtinejad point to another thing in his comment after the no conflict:
Other parts of script which rely on $
should change to jQuery
also
Bootstrap : TypeError: $(...).modal is not a function
Use this.
It will work.
I have used bootstrap 3.3.5
and jquery 1.11.3
$('document').ready(function() { $('#btnTest').click(function() { $('#dummyModal').modal('show'); });});
body { background-color: #eee; padding-top: 40px; padding-bottom: 40px;}
<!DOCTYPE html><html>
<head> <meta charset="utf8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <title>Modal Test</title></head>
<body> <div class="container"> <button id="btnTest" class="btn btn-default">Show Modal</button> <div id="dummyModal" role="dialog" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" data-dismiss="modal" class="close">×</button> <h4 class="modal-title">Error</h4> </div> <div class="modal-body"> <p>Quick Brown Fox Jumps Over The Lazy Dog</p> </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-default">Close</button> </div> </div> </div> </div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></body>
</html>
Related Topics
How to Define Custom Sort Function in JavaScript
JavaScript Closures and 'This'
Method Overloading in JavaScript
Migrating Angularjs to Angular 4,5 (With Demo)
JavaScript Regex Hangs (Using V8)
Settimeout Ignores Timeout? (Fires Immediately)
Limited Parallelism with Async/Await in Typescript/Es7
Closure in JavaScript - Whats Wrong
Node Js Promise.All and Foreach
Ecmascript 6 Features Available in Node.Js 0.12
Detect If User Clicks Inside a Circle
Open Android Application from a Web Page
How to Filter Input Type="File" Dialog by Specific File Type
How to Retrieve If the Popstate Event Comes from Back or Forward Actions with the HTML5 Pushstate