About Lesson
Modals with Static Backdrop & Keyboard Control
- data-bs-backdrop=”static” → Prevents closing by clicking outside
- data-bs-keyboard=”false” → Disables closing with the ESC key
Example: Static Backdrop Modal
HTML
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#staticModal">
Static Backdrop Modal
</button>
<div class="modal fade" id="staticModal" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Static Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
You cannot close this modal by clicking outside or pressing ESC.
</div>
</div>
</div>
</div>
Explanation:
- data-bs-backdrop=”static” prevents closing when clicking outside.
- data-bs-keyboard=”false” prevents closing using the ESC key.