Most common reason for such problems are
1.If you have defined the jquery library more than once.
Copy<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="modal fade" id="myModal" aria-hidden="true">
...
...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
The bootstrap library gets applied to the first jquery library but when you reload the jquery library, the original bootstrap load is lost(Modal function is in bootstrap).
2.Please wrap your JavaScript code inside
Copy$(document).ready(function(){});
3.Please check if the id of the modal is same
as the one you have defined for the component(Also check for duplication's of same id ).
Answer from Prakash Thete on Stack OverflowMost common reason for such problems are
1.If you have defined the jquery library more than once.
Copy<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="modal fade" id="myModal" aria-hidden="true">
...
...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
The bootstrap library gets applied to the first jquery library but when you reload the jquery library, the original bootstrap load is lost(Modal function is in bootstrap).
2.Please wrap your JavaScript code inside
Copy$(document).ready(function(){});
3.Please check if the id of the modal is same
as the one you have defined for the component(Also check for duplication's of same id ).
Copy<div class="modal fade" id="myModal" aria-hidden="true">
...
...
</div>
Note: Remove fade class from the div and enjoy it should be worked
Note 2: If removing the fade class seems to work for you. This probably means that you have a version mismatch between your Bootstrap js and CSS.
You might be using a slightly newer version of Bootstrap js with a slightly older version of Bootstrap CSS. It can be easy to forget to upgrade the Bootstrap css when upgrading the Bootstrap js.
Updating the Bootstrap CSS to match the Bootstrap js should fix this issue.
Videos
first thing you need to include jquery, and also trigger the modal, either with a button -
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
or show the bootstrap modal using jquery -
<script type="text/javascript">
$(document).ready(function(){
$('.modal').modal('show');
});
</script>
Your example doesn't have jQuery included.
Uncaught Error: Bootstrap requires jQuery
You must include jQuery before including Bootstrap.
Also, Bootstrap Modal's need to either be toggled by some kind of control on the page, or by JavaScript: http://getbootstrap.com/javascript/#modals-usage
This means you either need a button with the appropriate data attributes, which would correspond to attributes set on your modal, or execute via javascript
via JavaScript:
$('.modal').modal('show')
Or via attributes on a control:
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
EDIT: If you do this, you need to specify the target as the ID of the modal div
<div id="myModal" class="modal fade">
<!--modal content here -->
</div><!-- /.modal -->
I tracked down the reason.
Just to give it some general usefulness to anyone coming to this question. If you can't figure out what's wrong, try doing a 'search all' for any classes of 'modal' 'fade' 'fade in' and 'hide' in any style sheets in your application.
I had a single instance of 'fade' being defined in a random css file, and that's what was stopping it displaying as it was overriding bootstrap. Once I deleted the reference, everything was ok.
I had the same problem. For me the cause was the use of Bootstrap 5 with outdated data-toogle and data-target attributes in the launch button:
After the correction of
<button type="button" class="btn" data-toggle="modal" data-target="#myModal" >
to
<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#myModal">
it ran correctly.
Hi like the title says, I'm having trouble figuring out why my modal won't display once I click it. Not sure if it's the event listener(or in this case the on.('click') that's not responding.
I would greatly appreciate any advice since I have not been able to solve the problem for two days now.
Here is my link to the source code in codepen
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal. [source]
How to use via Vanilla JavaScript
Create a modal with a single line of JavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
source
A quick example:
Copyvar myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
document.onreadystatechange = function () {
myModal.show();
};
Copy<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
>
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- JavaScript and dependencies -->
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous"
></script>
<script src="./app.js"></script>
</body>
</html>
Run code snippetEdit code snippet Hide Results Copy to answer Expand
As for your code, you didn't follow the right way to show/toggle a modal in Vanilla JavaScript. Why did you expect myModal.show() to happen while myModal is just a DOM element?
- Create a new instace of modal and then call show method(see usage points)
Copyvar myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
myModal.show()
ref: https://v5.getbootstrap.com/docs/5.0/components/modal/#options
note: Bootstrap v5 no more uses jquery, instead it uses javascript. lots of changes are there in bootstrap v5, if you are working for a company and willing to use Bootstrap v5 then please go through all the changes.