How can I prevent a modal from closing when clicking outside (static backdrop)?

Asked on Jun 25, 2025

1 Answer

To prevent a Bootstrap modal from closing when clicking outside of it, you can use the `data-bs-backdrop` attribute with the value "static". This ensures the modal remains open even if the user clicks outside its boundaries.

<!-- BEGIN COPY / PASTE -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
            Launch demo modal
        </button>

        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static">
            <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-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Modal content goes here.
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `data-bs-backdrop="static"` attribute on the modal to prevent it from closing when clicking outside.
The `data-bs-keyboard="false"` attribute can also be added if you want to prevent closing the modal with the "Escape" key.
Ensure your modal has a unique `id` for proper targeting with the button.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions