Modal JavaScript API in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the Bootstrap Modal JavaScript API?

It allows you to control modal dialogs using JavaScript, such as showing, hiding, or toggling modals programmatically.

beginner

How do you create a new modal instance in Bootstrap using JavaScript?

Use new bootstrap.Modal(element), where element is the modal's DOM element.

beginner

Which method shows the modal using the Bootstrap Modal JavaScript API?

The show() method displays the modal on the screen.

beginner

How can you hide a modal using the Bootstrap Modal JavaScript API?

Call the hide() method on the modal instance to close it.

intermediate

What event can you listen to for when a Bootstrap modal is fully shown?

Listen for the shown.bs.modal event on the modal element to run code after it appears.

How do you initialize a Bootstrap modal in JavaScript?

A bootstrap.modal(element)

B Modal.create(element)

C new bootstrap.Modal(element)

D new Modal(element)

The correct way is to use new bootstrap.Modal(element) to create a modal instance.

Which method shows the modal on the page?

A open()

B show()

C display()

D start()

The show() method displays the modal dialog.

What event fires after a Bootstrap modal is fully visible?

A shown.bs.modal

B hide.bs.modal

C show.bs.modal

D hidden.bs.modal

The shown.bs.modal event fires after the modal is completely shown.

How do you programmatically close a Bootstrap modal?

A modal.close()

B modal.exit()

C modal.dismiss()

D modal.hide()

Use hide() method on the modal instance to close it.

Which of these is NOT a valid Bootstrap modal method?

A open()

B show()

C hide()

D toggle()

There is no open() method in Bootstrap modal API.

Explain how to create and show a Bootstrap modal using JavaScript.

Think about the steps from selecting the modal in HTML to making it appear.

Describe how to listen for when a Bootstrap modal finishes showing and why it might be useful.

Consider timing actions after the modal is fully displayed.

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