Why modals focus user attention in Bootsrap - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why does a modal prevent interaction with the background?

In Bootstrap, when a modal is open, why can't the user click or interact with the page behind it?

A Because the modal adds a backdrop that blocks clicks and focuses keyboard input inside the modal.

B Because the modal removes all other page elements from the DOM temporarily.

C Because the modal disables the browser's mouse and keyboard events globally.

D Because the modal changes the page's background color to gray.

💡 Hint

Think about what visually covers the page and where the keyboard focus goes.

Bootstrap modals add a semi-transparent backdrop that covers the page behind the modal. This backdrop blocks mouse clicks on the background. Also, keyboard focus is trapped inside the modal, so users cannot tab to elements outside it. This combination keeps user attention on the modal content.

📝 Syntax

intermediate

Which attribute ensures keyboard focus stays inside a Bootstrap modal?

Bootstrap modals use an attribute to trap keyboard focus inside the modal. Which attribute is responsible for this behavior?

A data-toggle="modal" on the modal container

B aria-hidden="true" on the modal container

C tabindex="-1" on the modal container

D role="dialog" on the modal container

💡 Hint

This attribute allows the modal container to receive focus programmatically.

The tabindex="-1" attribute on the modal container allows JavaScript to set focus to the modal when it opens. This helps trap keyboard navigation inside the modal, preventing focus from moving to background elements.

❓ rendering

advanced

What visual effect does Bootstrap use to highlight a modal?

When a Bootstrap modal opens, what visual effect helps focus user attention on the modal content?

A The modal content is displayed with a rainbow gradient background.

B A semi-transparent dark backdrop covers the page behind the modal.

C The page background scrolls faster to blur behind the modal.

D The modal content blinks rapidly to attract attention.

💡 Hint

Think about what dims the rest of the page when the modal is open.

Bootstrap adds a semi-transparent dark backdrop behind the modal. This dims the rest of the page, making the modal stand out visually and focusing user attention on it.

❓ accessibility

advanced

How does Bootstrap ensure screen readers focus on the modal?

Which ARIA attribute does Bootstrap use on modals to help screen readers identify the modal dialog?

A aria-expanded="true" on the modal container

B aria-hidden="false" on the page body

C aria-live="polite" on the modal container

D aria-modal="true" on the modal container

💡 Hint

This attribute tells assistive technologies that the rest of the page is inert while the modal is open.

The aria-modal="true" attribute indicates that the modal is a modal dialog and that the rest of the page content is inert. This helps screen readers focus on the modal content and ignore background content.

❓ selector

expert

Which CSS selector targets the Bootstrap modal backdrop?

You want to style the dark overlay behind a Bootstrap modal. Which CSS selector correctly targets the backdrop element?

A .modal-backdrop

B #modal-backdrop

C .modal > .backdrop

D div[data-backdrop]

💡 Hint

Bootstrap uses a specific class name for the backdrop element.

The backdrop element added by Bootstrap has the class modal-backdrop. Using .modal-backdrop in CSS targets this overlay for styling.