Bootsrapmarkup~30 mins

Why modals focus user attention in Bootsrap - See It in Action

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Create a Bootstrap Modal to Focus User Attention

📖 Scenario: You are building a website where you want to show an important message that grabs the user's attention. You will use a modal popup to do this. A modal is a box that appears on top of the page and stops the user from interacting with the rest of the page until they close it.

🎯 Goal: Build a simple Bootstrap modal that appears when the page loads. This modal will focus the user's attention by disabling interaction with the background content until the modal is closed.

📋 What You'll Learn

Use Bootstrap 5 modal structure

Create a button to open the modal

Make the modal appear automatically on page load

Ensure the modal traps keyboard focus inside it

Include accessible labels for screen readers

💡 Why This Matters

🌍 Real World

Modals are used on websites to show important messages, alerts, or forms without navigating away from the current page. They help focus user attention on critical tasks.

💼 Career

Knowing how to implement accessible and user-friendly modals is a common skill for web developers working on interactive websites and applications.

Progress0 / 4 steps

Set up the basic HTML structure with Bootstrap CSS and JS links

Create a basic HTML5 page with lang="en" and include the Bootstrap 5 CSS and JS CDN links inside the <head> and before the closing </body> tag respectively. Also add a <button> with id="openModalBtn" and text Open Modal inside the <body>.

Bootsrap




    
    
    Bootstrap Modal Focus

Need a hint?

Remember to add the Bootstrap CSS link inside the <head> and the Bootstrap JS bundle before the closing </body> tag. Also add a button with id="openModalBtn".

Add the modal HTML structure with accessible labels

Below the Open Modal button, add a Bootstrap modal structure with id="attentionModal". Include aria-labelledby="modalTitle" and aria-hidden="true" on the modal. Inside the modal, add a <h5> with id="modalTitle" and text Important Message. Also add a close button with data-bs-dismiss="modal" and aria-label="Close".

Bootsrap




    
    
    Bootstrap Modal Focus
    


    Open Modal

Need a hint?

Use the Bootstrap modal structure with the correct id and accessibility attributes. The modal title should have id="modalTitle" and the close button should have data-bs-dismiss="modal" and aria-label="Close".

Make the modal open automatically when the page loads

Add a <script> block before the closing </body> tag. Inside it, create a Bootstrap modal instance for attentionModal and call show() on it so the modal appears automatically when the page loads.

Bootsrap




    
    
    Bootstrap Modal Focus
    


    Open Modal

    
      
        
          
            Important Message
            
          
          
            This modal focuses your attention by disabling background interaction.

Need a hint?

Create a new Bootstrap modal instance using new bootstrap.Modal() and call show() on it inside a <script> tag before the closing </body>.

Add JavaScript to open the modal when the button is clicked

Add a click event listener to the button with id="openModalBtn". When clicked, it should call show() on the attentionModal instance to open the modal again.

Bootsrap




    
    
    Bootstrap Modal Focus
    


    Open Modal

    
      
        
          
            Important Message
            
          
          
            This modal focuses your attention by disabling background interaction.
          
        
      
    

    
    
      const attentionModal = new bootstrap.Modal(document.getElementById('attentionModal'));
      attentionModal.show();
      // Add event listener to open modal on button click

Need a hint?

Use document.getElementById('openModalBtn').addEventListener('click', ...) to open the modal again when the button is clicked.