BootstrapHow-ToBeginner · 3 min read

How to Create Static Backdrop Modal in Bootstrap

To create a static backdrop modal in Bootstrap, add the attribute data-bs-backdrop="static" to the modal element. This setting prevents the modal from closing when clicking outside it, ensuring the backdrop is static.

📐

Syntax

The static backdrop modal uses the data-bs-backdrop="static" attribute on the modal's main div. This tells Bootstrap to keep the backdrop visible and not close the modal when clicking outside it. You can also add data-bs-keyboard="false" to prevent closing the modal with the keyboard Esc key.

html

<div class="modal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal content here -->
    </div>
  </div>
</div>

💻

Example

This example shows a Bootstrap modal with a static backdrop. Clicking outside the modal or pressing Esc will not close it. The modal can only be closed by clicking the close button inside.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Static Backdrop Modal Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch Static Backdrop Modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Static Backdrop Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This modal cannot be closed by clicking outside or pressing Esc.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A webpage with a button labeled 'Launch Static Backdrop Modal'. Clicking it opens a modal titled 'Static Backdrop Modal' with text inside and a close button. Clicking outside the modal or pressing Esc does NOT close it.

⚠️

Common Pitfalls

Forgetting to add data-bs-backdrop="static" will make the modal close when clicking outside.
Not including data-bs-keyboard="false" means pressing Esc will still close the modal.
Using older Bootstrap versions (before 5) requires different attribute names (data-backdrop instead of data-bs-backdrop).
Not including Bootstrap's JavaScript bundle will prevent the modal from working.

html

<!-- Wrong: modal closes on outside click -->
<div class="modal" tabindex="-1">
  <!-- content -->
</div>

<!-- Right: static backdrop modal -->
<div class="modal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
  <!-- content -->
</div>

📊

Quick Reference

Use these attributes on your modal's main div to control backdrop behavior:

data-bs-backdrop="static": Prevents closing modal by clicking outside.
data-bs-keyboard="false": Prevents closing modal by pressing Esc.
tabindex="-1": Makes modal focusable for accessibility.

✅

Key Takeaways

Add data-bs-backdrop="static" to keep the modal open when clicking outside.

Use data-bs-keyboard="false" to disable closing the modal with the Esc key.

Ensure Bootstrap's JavaScript bundle is included for modal functionality.

Use tabindex="-1" on the modal for proper keyboard focus and accessibility.

Bootstrap 5 uses data-bs- prefixes; older versions use different attribute names.