Modal JavaScript API in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new Bootstrap modal instance.

Bootsrap

const myModal = new bootstrap.Modal(document.getElementById('myModal'), [1]);

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

Afalse

Bnull

Ctrue

D{}

Attempts:

3 left

💡 Hint

Common Mistakes

Passing null or boolean values instead of an object.

Leaving the options argument empty without braces.

The Modal constructor accepts an options object. Passing an empty object {} creates a modal with default settings.

2fill in blank

medium

Complete the code to show the modal using the JavaScript API.

Bootsrap

myModal.[1]();

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

Ashow

Bhide

Ctoggle

Dopen

Attempts:

3 left

💡 Hint

Common Mistakes

Using open() which is not a Bootstrap modal method.

Using toggle() which toggles visibility but is less explicit.

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

3fill in blank

hard

Fix the error in the code to hide the modal correctly.

Bootsrap

myModal.[1]();

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

Ahide

Bclose

Cshow

Dremove

Attempts:

3 left

💡 Hint

Common Mistakes

Using close() which is not a valid method.

Using remove() which deletes the element but does not hide the modal.

The correct method to hide a Bootstrap modal is hide(). Methods like close() or remove() do not exist for modals.

4fill in blank

hard

Fill both blanks to create a modal instance and show it immediately.

Bootsrap

const modal = new bootstrap.Modal(document.getElementById('exampleModal'), [1]);
modal.[2]();

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

A{}

Bshow

Chide

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Passing null instead of an object for options.

Calling hide() instead of show() to display the modal.

First, create the modal instance with an empty options object {}. Then call show() to display it.

5fill in blank

hard

Fill all three blanks to create a modal instance with keyboard disabled, show it, and then hide it.

Bootsrap

const modal = new bootstrap.Modal(document.getElementById('modalId'), [1]);
modal.[2]();
modal.[3]();

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

A{ keyboard: false }

Bshow

Chide

D{}

Attempts:

3 left

💡 Hint

Common Mistakes

Not disabling keyboard by passing empty object.

Using wrong method names like open() or close().

Pass { keyboard: false } to disable closing the modal with keyboard. Then call show() to open and hide() to close it.

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