Create Responsive Modal Boxes

Introduction

In this project, you will learn how to create a modal box component that can be displayed and hidden on a web page. Modal boxes are commonly used in web applications to display additional content or forms without navigating away from the current page.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to set up the HTML structure for a modal box
• How to implement the functionality to show and hide the modal box
• How to handle event bubbling to prevent the modal box from being shown again after being hidden

🏆 Achievements

After completing this project, you will be able to:

• Create a modal box using HTML, CSS, and JavaScript
• Use JavaScript functions to control the visibility of the modal box
• Prevent event bubbling to ensure the modal box behaves as expected

Skills Graph

Set Up the Project Structure

In this step, you will set up the project files and structure. Follow the steps below to complete this step:

Open the project folder. The directory structure is as follows:

├── bootstrap.min.css
├── bootstrap.min.js
├── index.html
├── jquery.min.js
└── style.css

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and manually refresh it to see the page.

Implement the Show and Hide Functionality

In this step, you will learn how to implement the functionality to show and hide the modal box.

1. Locate the <script> section at the bottom of the index.html file.
2. In the <script> section, you will find the following code:

// TODO
let signModalDoc = document.querySelector("#myModal");
function handleClick(e) {
  signModalDoc.style.display = "block";
  event.stopPropagation();
}
function handleOk(e) {
  signModalDoc.style.display = "none";
  event.stopPropagation();
}

3. Understand the purpose of each function:

   • handleClick(e): This function is called when the "Sign Up Now" button is clicked. It sets the display property of the modal box to 'block', which makes the modal box visible.
   • handleOk(e): This function is called when the close "X" button or the "OK" button inside the modal box is clicked. It sets the display property of the modal box to 'none', which hides the modal box.

4. The event.stopPropagation() line in both functions is used to prevent the click event from bubbling up to the parent elements, which could cause the modal box to be shown again after being hidden.

Test the Functionality

1. Save the index.html file.
2. Refresh the web page in your browser.
3. Click the "Sign Up Now" button to see the modal box appear.
4. Click the close "X" button or the "OK" button inside the modal box to see the modal box disappear. The final effect should be as follows:

Congratulations! You have successfully implemented the show and hide functionality for the modal box.

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.