Modal JavaScript API in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What happens when you call show() on a Bootstrap modal instance?

Consider a Bootstrap modal instance created with JavaScript. What is the visible effect in the browser when you call the show() method on this instance?

A The modal closes if it was open, otherwise nothing happens.

B The modal is removed from the DOM immediately without any animation.

C The modal content is replaced with a loading spinner but remains hidden.

D The modal becomes visible with a fade-in animation and the background is dimmed.

💡 Hint

Think about what a modal does when it appears on the screen.

Calling show() on a Bootstrap modal instance makes the modal appear with a smooth fade-in effect and dims the background to focus user attention on the modal content.

📝 Syntax

intermediate

Which code correctly initializes and shows a Bootstrap modal using JavaScript?

Given a modal element with id myModal, which JavaScript snippet correctly creates a Bootstrap modal instance and shows it?

Bootsrap

const modalElement = document.getElementById('myModal');

A const modal = bootstrap.Modal.getInstance(modalElement); modal.show();

B const modal = new bootstrap.Modal(modalElement); modal.show();

C const modal = bootstrap.Modal.create(modalElement); modal.open();

D const modal = new Modal(modalElement); modal.display();

💡 Hint

Bootstrap modal instances are created with new bootstrap.Modal(element).

To use the Bootstrap modal JavaScript API, you create a new instance with new bootstrap.Modal(element) and then call show() to display it.

❓ rendering

advanced

What is the visual result of calling hide() on a visible Bootstrap modal?

If a Bootstrap modal is currently visible on the page, what will the user see after calling the hide() method on its JavaScript instance?

A The modal fades out smoothly and the background dimming disappears.

B The modal instantly disappears without any animation, but the background stays dimmed.

C The modal content changes to a blank white box but remains visible.

D Nothing happens; the modal stays visible until the user clicks the close button.

💡 Hint

Think about how Bootstrap modals close when triggered by JavaScript.

Calling hide() triggers a fade-out animation for the modal and removes the backdrop dimming, returning the page to normal.

❓ accessibility

advanced

Which attribute ensures a Bootstrap modal is accessible to screen readers?

To make a Bootstrap modal accessible, which ARIA attribute should be included on the modal's main container element?

A aria-hidden="true"

B tabindex="-1"

C role="dialog" with aria-modal="true"

D aria-live="polite"

💡 Hint

Accessibility roles help screen readers understand the purpose of UI elements.

The role="dialog" tells screen readers this is a dialog window, and aria-modal="true" indicates it blocks interaction with the rest of the page.

❓ selector

expert

Which JavaScript code selects all Bootstrap modals currently shown on the page?

Bootstrap modals add the class show when visible. Which code snippet correctly selects all visible modals in the DOM?

A document.querySelectorAll('.modal.show')

B document.querySelectorAll('#modal.show')

C document.getElementsByClassName('modal show')

D document.querySelectorAll('.modal:visible')

💡 Hint

Use CSS selectors to find elements with multiple classes.

The selector .modal.show matches elements with both classes. querySelectorAll returns all such elements.

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