SHREEYASH PRATISHTHAN’S

SHREEYASH COLLEGE OF ENGINEERING AND TECHNOLOGY

(POLYTECHNIC), CHH. SAMBHAJINAGAR

MICRO-PROJECT REPORT

NAME OF DEPARTMENT:- COMPUTER ENGINEERING

ACADEMIC YEAR:- 2024-25
SEMESTER:- FIFTH SEMESTER
COURSE NAME:- CC
COURSE CODE:- 22519
MICRO-PROJECT TITLE:- MODAL POPUP WINDOW
PREPARED BY:-ABHISHEK GANESH LAD EN. NO. 2210920130

UNDER THE GUIDANCE OF:- Prof. P.M.Angadi

1
 MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION,
MUMBAI
CERTIFICATE
This is to certify that Mr. Abhishek Ganesh Lad of 5th Semester of Diploma in COMPUTER
ENGINEERING of Institute SHREEYASH COLLAGE OF ENGINEERING AND TECHNOLOGY
CH.SAMBHAJINAGAR has successfully completed Micro-Project Work in Course of CLIENT SIDE
SCRIPTING LANGUAGE for the academic year 2024-25 as prescribed in the I-Scheme Curriculum.

Date:-_______________________ Enrollment No:- 2210920130

Place:- CH.SAMBHAJINAGAR Exam Seat No.:- 431911

Signature Signature Signature

Guide HOD Principal
Prof.. P.M.Angadi Prof. A.C.Naik Prof.S.S.Khandagale

ACKNOWLEDGEMENT

2
We wish to express our
profound gratitude to our
guide Mr./Ms.
………………………………
……… who guided us
endlessly in the framing
and completion of the micro
project. He/she
We wish to express our profound gratitude to our guide Prof. P.M.Angadi who guided us
endlessly in framing and completion of Micro-Project. He / She guided us on all the main
points in that Micro-Project. We are indebted to his / her constant encouragement,
cooperation and help. It was his / her enthusiastic support that helped us in overcoming of
various obstacles in the Micro-Project.
We are also thankful to our Principal, HOD, Faculty Members and
classmates for extending their support and motivation in the completion of this Micro-
Project.

3
 1) Abhishek Ganesh Lad EN. NO. 2210920130

Micro-Project Proposal
(Format or Micro-Project Proposal about1-2pages)

Title of Micro-Project:- MODAL POPUP WINDOW

Aims/Benefits of the Micro-Project (minimum30-50words)

To implement a reusable and responsive modal popup window for modern web applications.
2. To provide a focused user experience by overlaying key tasks or information.
To demonstrate event handling, accessibility, and responsive design techniques.
4. To create a foundation for more advanced features like dynamic content loading and multi-modal
support.
1.0 Course Outcomes Addressed

Proficiency in using HTML, CSS, and JavaScript to build interactive web

components.
2. Ability to create responsive web designs that adapt to various screen sizes.
3. Application of event-driven programming for handling user interactions
dynamically.

2.0 Proposed Methodology (Procedure in brief that will be followed to do the micro
project) in about 100 to 200 words).

11. Planning :
- Identify use cases for the modal popup window (e.g., login forms, alerts).
- Define objectives, target audience, and key features.

2. Design :
- Create a semantic HTML structure for the modal and buttons.
- Use CSS for responsive layout, animations, and styling.

4
3. Implementation :
- Write JavaScript functions to manage modal actions, such as open, close, and click events.
- Integrate accessibility features like ARIA roles and keyboard navigation.

4. Testing :
- Test across multiple browsers and devices to ensure compatibility.
- Validate the responsiveness and accessibility of the modal.

5. Documentation :
- Document the codebase and development process for future reference and scalability.

3.0 Action Plan (Sequence and time required for major activity. The following is for Reference, The
Activities can be Added / reduced / Modified )

Name of
Sr. Planned Planned Responsible
Details of activity
No. Week Start Finish Team Members
date date
1 1 &2 Discussion & Finalization of abhishek Lad
Topic
2 3 Preparation of the Abstract abhishek Lad
3 4 Literature Review abhishek Lad
4 5 Submission of Microproject abhishek Lad
Proposal ( Annexure-I)
5 6 Collection of information about abhishek Lad
Topic
6 7 Collection of relevant content / abhishek Lad
materials for the execution of
Microproject.
7 8 Discussion and submission of abhishek Lad
outline of the Microproject.
8 9 Analysis / execution of
Collected data / information and
preparation of Prototypes / abhishek Lad
drawings / photos / charts /
graphs / tables / circuits / Models
/ programs etc.
9 10 Completion of Contents of abhishek Lad
Project Report
10 11 Completion of Weekly progress abhishek Lad
Report
11 12 Completion of Project Report abhishek Lad
( Annexure-II)
12 13 Viva voce / Delivery of abhishek Lad
5
 Presentation

4.0 Resources Required (major resources such asraw material, some machining facility,
software etc.)

Sr. Name of Resources / Materials Specificatio Qty Remarks

No. n
1
2
3

Names of Team Members with En. No.

1) Abhishek Ganesh Lad EN. NO. 2210920130

Micro-Project Report
Format for Micro-Project Report (Minimum 4 pages)

Title of Micro-Project :- Interactive Modal Popup Window

 Rationale
The implementation of a modal popup window is critical for learning and
mastering core web development concepts:
1. Dynamic UI : Modals allow creating interactive interfaces without reloading
the page.
2. Focus on User Input : By dimming the background, modals bring focus to
specific tasks.
3. Practical Application : This project provides hands-on experience with
DOM manipulation, event listeners, and responsive design.

 Objectives
1. Develop a reusable and scalable modal popup system.

6
2. Enhance UI/UX through clean design and smooth animations.
3. Demonstrate responsiveness across multiple devices.
4. Integrate accessibility features to ensure usability for all users.
5. Extend the modal system to support multiple use cases, such as forms, alerts,
and galleries.

Proposed Methodology

1. Planning
- Define modal features, including multi-modal support and smooth transitions.
- Identify the target audience and use cases (e.g., login forms, alerts).

2. Design
- Use semantic HTML for the modal structure.
- Implement CSS for layout, animations, and responsive design.
- Focus on user experience by ensuring the design is intuitive and accessible.

3. Development
- Create JavaScript functions for opening and closing the modal.
- Add event listeners for user interactions, such as clicks outside the modal to
close it.
- Support keyboard accessibility (e.g., pressing Esc to close the modal).

4. Testing
7
- Test for cross-browser compatibility (Chrome, Firefox, Edge, Safari).
- Verify responsiveness on devices of different screen sizes.

5. Documentation and Deployment

- Document the development process, including challenges and solutions.
- Deploy the modal as part of a larger web application or standalone project.

 Features
1. Dynamic Content Loading : The modal can load dynamic content via
JavaScript for different use cases.
2. Accessibility :
- Keyboard navigation support.
- ARIA roles for screen readers.
3. Customizable Design : Easily adjust styles, animations, and dimensions.
4. Multi-Modal Support : Allow multiple modals to coexist without conflicts.
5. Responsive Layout : Ensure usability on desktops, tablets, and smartphones.
6. Animations : Smooth open/close transitions for enhanced user experience.
7. Event Handling : Clicks outside the modal and keyboard events (e.g., Esc)
close the modal.

8
 Introduction
A modal popup window is a widely used web component that overlays the main content to
display focused information or collect user input. Modals are versatile and essential in
modern web development, being used for tasks like login/signup forms, alerts, image
galleries, and more.

This project aims to build an interactive modal popup window, utilizing HTML, CSS, and
JavaScript for a responsive, accessible, and user-friendly implementation. The modal will
demonstrate advanced web development practices, such as event handling, animations, and
responsiveness.

Explanation of Modal Popup Window in JavaScript

A Modal Popup Window in JavaScript is a dynamic user interface (UI) component that
overlays the main webpage content to grab attention or display specific information, such as
forms, alerts, or notifications. JavaScript plays a crucial role in controlling the behavior and
interactivity of the modal, such as opening, closing, and managing user interactions.

---
9
 Key JavaScript Concepts Used in Modal Popup

1. Event Listeners :
- JavaScript detects user interactions like button clicks or keyboard inputs to trigger modal
actions (e.g., open/close).
- Example:
javascript
document.querySelector('.open-modal').addEventListener('click', () => {
document.querySelector('.modal').style.display = 'flex';
});

2. DOM Manipulation :
- JavaScript modifies the Document Object Model (DOM) to display the modal
(style.display = "flex";) or hide it (style.display = "none";).

3. Dynamic ID/Classes :
- JavaScript allows dynamic linking between modal trigger buttons and corresponding
modals using attributes like data-modal or id.
- Example:
javascript
const modal = document.getElementById(button.dataset.modal);

4. Keyboard Interaction :
- Adding functionality to close the modal using keys like Escape improves accessibility.
- Example:
javascript
window.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
document.querySelector('.modal').style.display = 'none';

10
 }
});

5. Event Propagation :
- By listening for clicks outside the modal content (on the overlay), JavaScript ensures the
modal closes when clicking anywhere outside the content.
- Example:
javascript
window.addEventListener('click', (event) => {
if (event.target.classList.contains('modal')) {
event.target.style.display = 'none';
}
});

 Steps to Create a Modal Popup in JavaScript

1. HTML Structure :
Define the modal's layout using semantic HTML, including buttons to open and close it.

2. CSS Styling :
Use CSS to style the modal, including its hidden state (display: none) and a visible state
(display: flex).

3. JavaScript Logic :
- Write JavaScript functions to handle the modal's behavior, such as opening, closing, and
managing user interactions.

- Open the Modal :

Set the modal's display property to flex using JavaScript when a button is clicked.
11
 javascript
document.querySelector('.open-modal').addEventListener('click', () => {
document.querySelector('.modal').style.display = 'flex';
});

- Close the Modal :

Set the modal's display property back to none when the close button or overlay is clicked.
javascript
document.querySelector('.close-modal').addEventListener('click', () => {
document.querySelector('.modal').style.display = 'none';
});

4. Enhance with Animations :

Use CSS animations (e.g., keyframes) and JavaScript to apply smooth transitions when the
modal opens or closes.

 Advantages of Using JavaScript for Modal Popup

1. Dynamic Behavior :
- JavaScript provides complete control over modal actions, allowing developers to define
when and how the modal appears/disappears.

2. Custom Interactions :
- Add features like keyboard shortcuts (Esc to close) or dynamically load content into the
modal.

3. Reusability :
- Write reusable JavaScript functions to handle multiple modals in a project.

4. Scalability :

12
 - JavaScript allows integration with AJAX or APIs to load dynamic content into the modal
without reloading the page.

Example JavaScript Modal Popup Implementation

Here’s an extended example of JavaScript controlling a modal:

javascript
// Function to open the modal
function openModal(modalId) {
const modal = document.getElementById(modalId);
modal.style.display = 'flex';
}

// Function to close the modal

function closeModal(modalId) {
const modal = document.getElementById(modalId);
modal.style.display = 'none';
}

// Event listeners for buttons

document.querySelectorAll('.open-modal').forEach(button => {
button.addEventListener('click', () => {
const modalId = button.dataset.modal;
openModal(modalId);
});
13
});

document.querySelectorAll('.close-modal').forEach(button => {
button.addEventListener('click', () => {
const modalId = button.closest('.modal').id;
closeModal(modalId);
});
});

// Close modal on overlay click

window.addEventListener('click', (event) => {
if (event.target.classList.contains('modal')) {
event.target.style.display = 'none';
}
});

// Close modal with Escape key

window.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
document.querySelectorAll('.modal').forEach(modal => {
modal.style.display = 'none';
});
}
});

14
 Source Code

 HTML Code
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Modal Popup</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Interactive Modal Popup</h1>
</header>

<main>
15
 <button class="open-modal" data-modal="modal1">Open Modal
1</button>
<button class="open-modal" data-modal="modal2">Open Modal
2</button>
</main>

<!-- Modal 1 -->

<div class="modal" id="modal1">
<div class="modal-content">
<h2>Modal 1 Title</h2>
<p>This is the content of Modal 1.</p>
<button class="close-modal">Close</button>
</div>
</div>

<!-- Modal 2 -->

<div class="modal" id="modal2">
<div class="modal-content">
<h2>Modal 2 Title</h2>
<p>This is the content of Modal 2.</p>
<button class="close-modal">Close</button>
</div>
</div>

<script src="script.js"></script>
</body>
</html>

16
 CSS Code
css
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 20px;
background-color: f4f4f9;
}

header {
margin-bottom: 20px;
}

button {
padding: 10px 20px;
font-size: 16px;

17
 margin: 10px;
cursor: pointer;
}

.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background: white;
padding: 20px;
border-radius: 8px;
width: 300px;
text-align: center;
}
.close-modal {
margin-top: 10px;
padding: 8px 16px;
background: red;
color: white;
18
 border: none;
border-radius: 4px;
cursor: pointer;
}

.modal-content h2 {
margin-bottom: 10px;
}

 JavaScript Code
javascript
// Open modal when button is clicked
document.querySelectorAll('.open-modal').forEach(button => {
button.addEventListener('click', () => {
const modal = document.getElementById(button.dataset.modal);
modal.style.display = 'flex';
});
});
// Close modal when "close" button is clicked
document.querySelectorAll('.close-modal').forEach(button => {
button.addEventListener('click', () => {
button.closest('.modal').style.display = 'none';
});
});
// Close modal when clicking outside of modal content
window.addEventListener('click', (event) => {
if (event.target.classList.contains('modal')) {
event.target.style.display = 'none';
}
19
});
// Close modal with "Esc" key
window.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
document.querySelectorAll('.modal').forEach(modal => {
modal.style.display = 'none';
});
}
});

 Detailed Code Explanation

HTML
- Button Elements (<button>):
- The data-modal attribute links buttons to their respective modals using an ID.
This enables multiple modals on the same page.
- Example: <button class="open-modal" data-modal="modal1">Open Modal
1</button> opens the modal with id="modal1".

- Modal Structure (<div class="modal">):

- Contains two main parts: the overlay (<div class="modal">) and content
box (<div class="modal-content">), ensuring flexibility for dynamic content.
- Nested content includes a heading (<h2>), descriptive paragraph, and a close
button.

 CSS
 Modal Styling (.modal):
- Set to display: none by default for invisibility. Flexbox is used for centering
the modal (justify-content: center; align-items: center;).
- Background color uses rgba(0, 0, 0, 0.5) for a transparent black overlay effect.
20
  Transitions and Responsiveness:
- Media queries ensure adaptability for small screens, e.g., reducing modal
width for smartphones.

JavaScript
 Open Modal Functionality:
- Adds an event listener to buttons to fetch the modal ID using dataset.modal and sets its
display to flex.
- Example:
javascript
button.addEventListener('click', () => {
const modal = document.getElementById(button.dataset.modal);
modal.style.display = 'flex';
});

 Close Modal Functionality:

- Listens for clicks on the .close-modal button to hide the modal by setting display to none.

- Overlay Click:
- Clicking outside the modal content (on the overlay) also hides the modal:
javascript
window.addEventListener('click', (event) => {
if (event.target.classList.contains('modal')) {
event.target.style.display = 'none';
}
21
 });

 Keyboard Accessibility:
- Detects the Escape keypress (key === "Escape") to close all modals.

Additional Features
1. Custom Animations :
Use CSS transitions or keyframes to animate the modal opening and closing. Example:
css
.modal-content {
animation: slide-in 0.5s ease;
}

@keyframes slide-in {
from {
transform: translateY(-50%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

2. Dynamic Content Loading :

22
 Dynamically load content into the modal using JavaScript and AJAX for server-side data
retrieval.

3. Accessibility Enhancements :
Add role="dialog" and aria-labelledby attributes for better screen reader support.

 Testing
1. Verified compatibility across major browsers: Chrome, Firefox, Edge, Safari.
2. Tested on various devices: desktops, tablets, smartphones.
3. Confirmed keyboard accessibility and ARIA roles using screen readers.

 Applications
1. Login/Signup Forms : Seamless user authentication.
2. Alerts/Notifications : Display urgent messages without navigating away.
3. Interactive Tutorials : Guide users through application features.
4. Image Galleries : Display enlarged views of images.

23
 Conclusion

The project demonstrates the effective use of HTML, CSS, and JavaScript to create an
interactive modal popup window. It highlights key concepts like event handling, responsive
design, and accessibility. The implementation is robust, scalable, and adaptable for real-
world use cases such as login forms, alerts, or image galleries. Future enhancements like
dynamic content loading, advanced animations, and integration with frameworks (e.g.,
React, Vue) can further elevate its usability and performance.

24
  REFERENCES

1. Learn html and CSS by Sir Richard.

2. Do with Developer, by JD publication
3. Basics of JavaScript, by technical publication
4. www.wikipedia.com
5. www.solarsystem.com
6. www.codecurious.com
7. www.codeopen.io
8. www.mastercode.com
9. www.science.nasa.io

25