Currently, I've been utilizing Bootstrap in conjunction with JQuery and have a specific code snippet that displays a Modal when a page is loaded. However, with the latest version 5.2 of Bootstrap, there is a push to move away from using JQuery (which is definitely a positive move), but unfortunately, the documentation on how to achieve this is quite lacking. Essentially, starting with a modal defined in HTML:
<div class="modal auto-modal">
I am looking to replace the previously used JQuery line:
$(.auto-modal).modal('show')
with pure JavaScript. My attempts so far have been:
const elem = document.querySelector('.auto-modal')
const modal = bootstrap.Modal.getOrCreateInstance(elem)
However, the value of modal ends up being null. This holds true even if I try using getInstance(elem) or replacing elem with the selector .auto-modal
Is there anyone out there who can guide me on displaying the modal created in HTML programmatically using only pure JavaScript? Essentially, without creating it via JavaScript like:
const modal = new bootstrap.Modal('.auto-modal')
Your assistance would be greatly appreciated.