Question
Bootstrap Modal: Nested Modal Backdrop Click Handling
Nia Dey
0 reputation · 09 Jun 2023, 11:48 UTC
43.3K views0
Goal
When a second modal is opened on top of an already visible modal, the desired behavior is to control whether clicking the backdrop closes only the topmost dialog or also affects the underlying modal(s). The current default is that a backdrop click triggers a hide event only on the topmost modal, leaving the first modal still hidden behind it.
Constraints and Uncertainty
- Bootstrap 5’s
data-bs-backdropattribute acceptstrue,false, orstatic, but does not expose a setting that propagates the click to lower‑level modals. - Focus trapping is automatically enabled for each modal, but it is unclear how the focus chain behaves when the topmost modal is dismissed via a backdrop click while an underlying modal remains hidden.
- The API provides a
keyboardoption to close on Esc but offers no backdrop‑click equivalent for nested scenarios.
Specific Questions
- Is there a configuration or a documented workaround that allows a backdrop click to dismiss all open modals in a nested stack, rather than just the topmost one?
- Can the backdrop click behavior be disabled for nested modals while maintaining the ability to close the topmost modal via Esc or a close button?
- Does Bootstrap 5 provide an event or callback that can be used to intercept backdrop clicks in nested modals and implement custom propagation logic?