I have the following modal in boostrap
<div
className="modal fade"
id="exampleModal"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">
Select a wallet
</h5>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
</div>
and I got a a element that when clicking, shows the modal.
<a
className="nav-link wallet-btn"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Show Modal
</a>
If I want to close the button programatically, i do the following:
const el = document.querySelector('.btn-close');
if(el) {
// @ts-ignore
el.click();
}
How can I open this modal programatically by following the same idea/way ?
Use the Bootstrap method .show().
const modal = document.querySelector(".modal")
if (modal) {
modal.addEventListener("click", function() {
modal.show()
})
}
For more refer to docs: https://getbootstrap.com/docs/5.0/components/modal/#show