Menu
whats the correct way to manually call a modal in bootstrap 5?
i want to show the modal when page is open. i tried this:
my modal
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
...
...
...
</div>
</div>
</div>
my script is
var myModal = document.getElementById('myModal');
document.onreadystatechange = function() {
myModal.show();
}
but got this error in console log:
myModal.show is not a function
at HTMLDocument.document.onreadystatechange
255
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:
var myModal = new bootstrap.Modal(document.getElementById("exampleModal"), {});
document.onreadystatechange = function () {
myModal.show();
};<!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/[email protected]/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>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?
74
var 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.
21
Based on the javascript code provided by the OP I think the actual goal here is to reach out the component by the DOM element. I have also looked for a way to do this so wanted to share what I have found(or not found).
v4- It was possible and commonly used with the earlier versions. In v4 we could have used it easily with jQuery although the component is initialized by the data attributes and not directly from js.
$('#myModal').modal('show');
v5.0.0-beta2 In the new version, a very promising api example is provided at the docs for another type of component. However, it does not seem to be working currently. (https://getbootstrap.com/docs/5.0/getting-started/javascript/#asynchronous-functions-and-transitions)
var myModal = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModal)
console.log(modal) // null
Since all the components are using same basecomponent, one might think that it is possible to get instance of the modal as well as the others like dropdown, collapse, carousel and all by using getInstance api method but it is not possible. At least for the current beta version.
A final note: It is still possible to include jQuery before v5 script and achive this.(https://codepen.io/cadday/pen/Jjbvxvm)
window.onload = function() {
console.log(jQuery('#myModal').modal('show'));
}
[Bootstrap 5+, vanilla js, bootstrap imported as a global]
let modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('myModal')) // Returns a Bootstrap modal instance
// Show or hide:
modal.show();
modal.hide();
See more here: https://getbootstrap.com/docs/5.0/components/modal/#getorcreateinstance
7
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
