Modal onload
Bootstrap 5 Modal onload component
Responsive Modal onload built with Bootstrap 5. A simple way to modal that appears when the page is loaded. It will work great e.g. as Cookie Consent.
Basic example
To make the modal appear immediately after loading the page, just remove the redundant button
and add the corresponding JS function.
Open the demo to see an example.
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" 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" data-mdb-button-init data-mdb-ripple-init class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary" data-mdb-dismiss="modal">Close</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
const myModal = new mdb.Modal(document.getElementById('myModal'), {})
myModal.toggle()