Why modals focus user attention in Bootsrap - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add the Bootstrap modal class to the div.

Bootsrap

<div class="modal [1]" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </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>

Drag options to blanks, or click blank then click option'

Afade

Bshow

Chidden

Dactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'show' class initially instead of 'fade'.

Confusing 'active' with modal visibility classes.

The fade class adds a fade effect to the modal, which is part of Bootstrap's modal styling.

2fill in blank

medium

Complete the code to add the attribute that traps keyboard focus inside the modal.

Bootsrap

<div class="modal fade" tabindex="-1" role="dialog" [1]>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- modal content here -->
    </div>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Aaria-expanded="true"

Baria-hidden="true"

Caria-modal="true"

Daria-live="polite"

Attempts:

3 left

💡 Hint

Common Mistakes

Using aria-hidden which hides content from screen readers.

Confusing aria-expanded with modal focus behavior.

The aria-modal="true" attribute tells assistive technologies that the modal is active and focus is trapped inside it.

3fill in blank

hard

Fix the error in the button that closes the modal by completing the data attribute.

Bootsrap

<button type="button" class="btn-close" [1] aria-label="Close"></button>

Drag options to blanks, or click blank then click option'

Adata-bs-toggle="modal"

Bdata-dismiss="modal"

Cdata-toggle="modal"

Ddata-bs-dismiss="modal"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'data-dismiss' which was used in Bootstrap 4.

Using 'data-toggle' which is for toggling modals, not dismissing.

Bootstrap 5 uses data-bs-dismiss="modal" to close modals via buttons.

4fill in blank

hard

Fill both blanks to create a button that opens the modal with id 'myModal'.

Bootsrap

<button type="button" class="btn btn-primary" [1]="#myModal" [2]="modal">
  Launch modal
</button>

Drag options to blanks, or click blank then click option'

Adata-bs-target

Bdata-target

Cdata-bs-toggle

Ddata-toggle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'data-target' and 'data-toggle' which are Bootstrap 4 syntax.

Forgetting the '#' in the target value (not shown here because it's in quotes).

In Bootstrap 5, data-bs-toggle="modal" activates the modal, and data-bs-target="#myModal" specifies which modal to open.

5fill in blank

hard

Fill all three blanks to create a modal div with id 'myModal', role 'dialog', and aria-labelledby 'modalTitle'.

Bootsrap

<div class="modal fade" id="[1]" tabindex="-1" role="[2]" aria-labelledby="[3]">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTitle">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </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>

Drag options to blanks, or click blank then click option'

AmyModal

Bdialog

CmodalTitle

Dalert

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'alert' as role instead of 'dialog'.

Mismatching aria-labelledby id with the modal title's id.

The modal's id is 'myModal', the role is 'dialog' to indicate a dialog window, and aria-labelledby points to 'modalTitle' for accessibility.