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" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">...</div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
                
        
    
        
            
                 const myModal = new mdb.Modal(document.getElementById('myModal'), {})
                 myModal.toggle()