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.

Demo
Edit in sandbox 
        
            
                <!-- 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()