Modal JavaScript API in Bootsrap - Mini Project: Build & Apply

Create a Bootstrap Modal Using JavaScript API

📋 What You'll Learn

💡 Why This Matters

🌍 Real World

Modals are common on websites for showing extra information, forms, or alerts without leaving the current page.

💼 Career

Knowing how to use Bootstrap's modal JavaScript API helps you build interactive and user-friendly web interfaces quickly.

1

Set up the basic HTML structure with Bootstrap modal

Create the HTML structure for a Bootstrap modal with id="myModal". Include a modal dialog, modal content, modal header with Modal Title, modal body with This is the modal content., and modal footer with a button that has data-bs-dismiss="modal" and text Close.

Bootsrap

  
  
  Bootstrap Modal Example
  

Hint

Use the Bootstrap modal HTML template. Make sure the modal has id="myModal" and includes header, body, and footer sections with the correct text and close button.

2

Add a button to open the modal

Add a button with id="openModalBtn" and text Open Modal above the modal HTML. This button will be used to open the modal using JavaScript.

Bootsrap

  
  
  Bootstrap Modal Example
  






  
    
      
        Modal Title
        
      
      
        This is the modal content.
      
      
        Close
      
    
  

Hint

Add a button with id="openModalBtn" and text Open Modal before the modal HTML.

3

Create a JavaScript variable for the modal instance

Add a JavaScript line after loading Bootstrap's JS to create a variable called myModal that stores a new Bootstrap modal instance for the element with id="myModal". Use new bootstrap.Modal(document.getElementById('myModal')).

Bootsrap

  
  
  Bootstrap Modal Example
  



Open Modal


  
    
      
        Modal Title
        
      
      
        This is the modal content.
      
      
        Close
      
    
  




// Create a variable called myModal for the Bootstrap modal instance

Hint

Use const myModal = new bootstrap.Modal(document.getElementById('myModal')); inside a <script> tag after loading Bootstrap JS.

4

Add JavaScript to open the modal on button click

Add a JavaScript event listener for the button with id="openModalBtn". When clicked, call myModal.show() to open the modal.

Bootsrap

  
  
  Bootstrap Modal Example
  



Open Modal


  
    
      
        Modal Title
        
      
      
        This is the modal content.
      
      
        Close
      
    
  





  const myModal = new bootstrap.Modal(document.getElementById('myModal'));

  // Add event listener to open modal on button click
  document.getElementById('openModalBtn').addEventListener('click', function() {
    // Your code here
  });

Hint

Use document.getElementById('openModalBtn').addEventListener('click', function() { myModal.show(); }); inside the <script> tag.

Practice

1. What does the Bootstrap Modal JavaScript API primarily allow you to do?

easy

A. Resize the modal window automatically

B. Change the modal's background color dynamically

C. Open and close modals programmatically without user clicks

D. Add new buttons inside the modal content

Solution

1. Step 1: Understand the purpose of the Modal JavaScript API

   The API is designed to control modal visibility using JavaScript, not styling or content changes.

2. Step 2: Identify the main feature

   It allows opening and closing modals programmatically, which means without relying on user clicks.

3. Final Answer:

   Open and close modals programmatically without user clicks -> Option C

4. Quick Check:

   Modal API controls visibility [OK]

Hint: Modal API controls showing/hiding modals with code [OK]

Common Mistakes:

• Thinking it changes modal styles
• Assuming it resizes modals automatically
• Believing it adds content inside modals

2. Which of the following is the correct way to create a Bootstrap modal instance in JavaScript?

easy

A. const modal = new bootstrap.Modal(document.querySelector('#myModal'));

B. const modal = bootstrap.createModal('#myModal');

C. const modal = new Modal('#myModal');

D. const modal = bootstrap.Modal.open('#myModal');

Solution

1. Step 1: Recall Bootstrap modal instance creation syntax

   Bootstrap requires using the constructor with the element: new bootstrap.Modal(element).

2. Step 2: Match the correct syntax

   const modal = new bootstrap.Modal(document.querySelector('#myModal')); uses new bootstrap.Modal with a DOM element selected by querySelector, which is correct.

3. Final Answer:

   const modal = new bootstrap.Modal(document.querySelector('#myModal')); -> Option A

4. Quick Check:

   Use new bootstrap.Modal(element) [OK]

Hint: Use new bootstrap.Modal with a DOM element [OK]

Common Mistakes:

• Using non-existent bootstrap.createModal method
• Omitting 'new' keyword
• Passing selector string instead of element

3. Given the following code, what happens when modal.show() is called?

const modal = new bootstrap.Modal(document.getElementById('exampleModal'));
modal.show();

medium

A. The modal is hidden from the screen

B. Nothing happens because the modal is not initialized

C. An error occurs because show() is not a method

D. The modal with id 'exampleModal' is displayed on the screen

Solution

1. Step 1: Understand what modal.show() does

   The show() method displays the modal on the screen by changing its visibility and adding necessary classes.

2. Step 2: Confirm modal initialization

   The modal is correctly initialized with new bootstrap.Modal and a valid element, so show() works as expected.

3. Final Answer:

   The modal with id 'exampleModal' is displayed on the screen -> Option D

4. Quick Check:

   modal.show() displays modal [OK]

Hint: modal.show() always displays the modal [OK]

Common Mistakes:

• Confusing show() with hide()
• Assuming show() is not a method
• Not initializing modal before calling show()

4. What is wrong with this code snippet that tries to open a modal?

const modal = bootstrap.Modal(document.getElementById('myModal'));
modal.show();

medium

A. modal.show() cannot be called directly

B. Missing 'new' keyword when creating the modal instance

C. The selector '#myModal' is invalid

D. Incorrect method name; should be open() instead of show()

Solution

1. Step 1: Check modal instance creation syntax

   Bootstrap modal instances require the 'new' keyword: new bootstrap.Modal(element).

2. Step 2: Identify the error in the code

   The code misses 'new', so modal is undefined or not a proper instance, causing show() to fail.

3. Final Answer:

   Missing 'new' keyword when creating the modal instance -> Option B

4. Quick Check:

   Always use 'new' to create modal instances [OK]

Hint: Remember 'new' before bootstrap.Modal() [OK]

Common Mistakes:

• Using open() instead of show()
• Passing selector string instead of element
• Calling show() on undefined variable

5. You want to open a modal only after a user clicks a button, but also want to close it automatically after 3 seconds using Bootstrap's Modal JavaScript API. Which code snippet correctly achieves this?

hard

A. const modal = new bootstrap.Modal(document.getElementById('autoCloseModal'));
document.getElementById('openBtn').addEventListener('click', () => {
modal.show();
setTimeout(() => modal.hide(), 3000);
});

B. const modal = new bootstrap.Modal('#autoCloseModal');
document.getElementById('openBtn').onclick = () => {
modal.open();
setTimeout(() => modal.close(), 3000);
};

C. const modal = bootstrap.Modal(document.getElementById('autoCloseModal'));
document.getElementById('openBtn').addEventListener('click', () => {
modal.show();
setTimeout(() => modal.hide(), 3000);
});

D. const modal = new bootstrap.Modal(document.querySelector('autoCloseModal'));
document.getElementById('openBtn').addEventListener('click', () => {
modal.show();
setTimeout(() => modal.hide(), 3000);
});

Solution

1. Step 1: Verify modal instance creation

   const modal = new bootstrap.Modal(document.getElementById('autoCloseModal')); document.getElementById('openBtn').addEventListener('click', () => { modal.show(); setTimeout(() => modal.hide(), 3000); }); correctly uses 'new bootstrap.Modal' with a DOM element from getElementById, which is valid.

2. Step 2: Check event listener and timing

   The click event triggers modal.show(), then setTimeout calls modal.hide() after 3000ms (3 seconds), which matches the requirement.

3. Final Answer:

   const modal = new bootstrap.Modal(document.getElementById('autoCloseModal')); document.getElementById('openBtn').addEventListener('click', () => { modal.show(); setTimeout(() => modal.hide(), 3000); }); -> Option A

4. Quick Check:

   Use show() and hide() with setTimeout for auto-close [OK]

Hint: Use show() then setTimeout with hide() [OK]

Common Mistakes:

• Omitting 'new' keyword
• Using invalid methods like open() or close()
• Passing selector string instead of element